我正在嘗試使用 React 鉤子創建游戲。從本質上講，你會得到一份足球運動員的職業歷史，你必須猜測它是哪個球員。
不過我有一個問題，因為在極少數情況下，您可能會猜出一個球員，例如“貝克漢姆”，然后生成的下一個球員可能有相同的名字“貝克漢姆”，但卻是一個完全不同的球員，具有諷刺意味的是具有相同的名字。
我的問題是我有一個 useEffect 依賴于猜測，例如“貝克漢姆”，然后運行一些代碼來檢查答案。
但是，如果您在下一個玩家中再次有一個姓氏相同的玩家并再次猜測“貝克漢姆”，那么檢查答案代碼將永遠不會運行，因為 useEffect 會查看猜測依賴項并說它與我沒有運行代碼之前相同里面。
代碼筆示例
https://codepen.io/joe-consterdine/pen/popmNrE
這里 useEffect 永遠不會重新渲染，因為 'joe' 總是猜測，但在游戲中有兩個 joe，所以它不是同一個人。
謝謝
const [players, setPlayers] = React.useState([
{
id: 0,
name: 'joe'
},
{
id: 2,
name: 'joe'
},
]);
const [guess, setGuess] = React.useState('joe');
const handleOnSubmit = (event) => {
event.preventDefault();
// setGuess('james');
setGuess('joe');
}
React.useEffect(() => {
console.log('re rendered');
}, [guess])
return (
<div>
<form onSubmit={handleOnSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>
{players.map(player => (
<p key={player.id}>{player.name}</p>
))}
</div>
);
}
uj5u.com熱心網友回復：
我會用物件狀態改變字串狀態。使用此解決方案，您將不會遇到同樣的問題
const [guess, setGuess] = React.useState({id: 0, name: 'joe'});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/463358.html
標籤：javascript 反应