反应使用状态依赖关系在传递相同值时不会更新

Question

我正在尝试使用React钩子创建一个游戏。从本质上讲，你得到一个足球运动员的职业历史，你必须猜出这是哪个球员。

我有一个问题，因为在极少数情况下，你可能会猜测一个球员，例如'贝克汉姆'，然后下一个球员生成可能有相同的名字'贝克汉姆'，但完全不同的球员只是具有相同的名字。

我的问题是我有一个useEffect与guess的依赖关系，例如'beckham'，然后一些代码运行来检查答案。

但是如果你有一个与下一个球员姓氏相同的球员并再次猜测'beckham'，那么检查答案代码永远不会运行，因为useEffect查看猜测依赖并说它与之前相同，我没有在里面运行代码。

Codepen例子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>
);
}

Answer 1

我将用对象状态更改字符串状态。有了这个解决方案，你就不会有同样的问题了

const [guess, setGuess] = React.useState({id: 0, name: 'joe'});