React中useEffect无效钩子调用问题及setState异步执行诉求

错误原因 #

React的钩子（比如useEffect）有严格的调用规则：必须直接在组件函数的顶层作用域调用，不能嵌套在普通函数、条件语句、循环或者其他钩子内部。你把useEffect放在了自定义函数setWinner里，完全违反了钩子的调用规则，所以触发了"无效钩子调用"错误。

修复方案 #

把useEffect移到组件顶层，让它专门监听hand状态的变化，一旦hand更新完成，自动执行findWinner。setWinner函数只负责更新hand状态即可。

修正后的代码示例：

const [hand, setHand] = useState({myhand:-1, comhand:-1})

// 将useEffect移至组件顶层
useEffect(() => {
    // 可选：过滤初始状态（避免myhand/comhand为-1时调用findWinner）
    if (hand.myhand !== -1 && hand.comhand !== -1) {
        findWinner(hand.myhand, hand.comhand)
    }
}, [hand]); // 依赖hand状态，状态更新时自动执行

function setWinner(h){
    setHand({myhand:h, comhand:Math.floor(Math.random()*10)%5});
}

补充说明 #

调用setHand后，React会在下一次渲染时更新hand状态，此时useEffect因为依赖了hand，会自动触发执行，这样就能保证findWinner在hand更新完成后运行。如果不需要过滤初始状态，可以去掉代码中的判断条件。

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