React组件中点击设置的两个状态变量比较时因状态未及时更新导致匹配失败的问题

这个问题的核心在于React的状态更新是异步批量执行的——当你调用setSecond(e.target.dataset.id)后，second状态并不会立刻更新，此时立刻执行checkMatch()，函数里拿到的还是更新前的second值，自然会一直输出no match。

解决方案1：使用useEffect监听状态变化 #

最直接的修复方式是用useEffect钩子监听first和second的变化，当两个状态都存在时自动执行匹配检查：

import { useState, useEffect } from 'react';

// 你的组件其余代码...

// 监听first和second的变化，触发匹配检查
useEffect(() => {
  if (first !== undefined && second !== undefined) {
    checkMatch();
  }
}, [first, second]); // 依赖数组：当first或second改变时执行回调

const handleSelection = (e) => { 
  if (!first) { 
    // 注意：dataset.id是字符串，要转成整数匹配你的状态类型
    setFirst(parseInt(e.target.dataset.id)); 
  } else if (!second) { 
    setSecond(parseInt(e.target.dataset.id)); 
    // 这里不再直接调用checkMatch，交给useEffect处理
  } else { 
    setFirst(parseInt(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> 
)

额外注意点：类型匹配问题 #

你提到状态是整数类型，但e.target.dataset.id返回的是字符串，如果直接赋值，会出现"5" === 5这样的类型不相等情况，即使数值一样也会判断为不匹配。所以一定要用parseInt（或Number()）把字符串转成整数后再设置状态。

为什么原来的写法不行？ #

React为了优化性能，会把多个状态更新合并成一次批量更新，所以状态变量的更新不会同步生效。在handleSelection里调用setSecond后，当前渲染周期内的second还是旧值，要等到组件重新渲染后，second才会变成新值——而checkMatch是在当前渲染周期内执行的，自然拿不到最新状态。

内容的提问来源于stack exchange，提问作者user8006446