比较 React 中的两个状态变量

Question

我想比较 React 组件中的两个状态，它们都是通过单击按钮设置的。我的问题是，当单击第二个按钮时，会在状态更新之前立即调用比较函数，因此我不断收到“不匹配”消息。下面是代码的细分（这是一个按钮组件 - 通过 forEach 循环显示多次。有两个状态 - 第一个和第二个 - 都是整数）。

const handleSelection = (e) => {
    if (!first) {
        setFirst(e.target.dataset.id);
    } else if (!second) {
        setSecond(e.target.dataset.id);
        checkMatch();
    } else {
        setFirst(e.target.dataset.id);
        setSecond(undefined);
    }
}   

const checkMatch = () => {
    if(first === second) {
        console.log('match');
    } else {
        console.log('no match');
    }
}


return (
    <div className="grid-item">
        <button onClick={(e) => handleSelection(e)} data-id={item.number}>{item.number}</button>
    </div>
)

Answer 1

一旦作为依赖项传递的值之一更新，useEffect 挂钩就可以帮助您订阅状态中的任何更改。

checkMatch因此，您可以执行以下操作，而不是使用您的函数：

useEffect(() => {
   if (first === second) {
      console.log('match');
   } else {
      console.log('no match');
   }
}, [first, second]);

在此示例中，first和second是钩子的依赖项，并且会在这些状态变量之一更新时useEffect调用回调函数（ 的第一个参数）。useEffect