React中useState钩子使用大包裹更新回调为何失效？

这是箭头函数的语法规则导致的问题，具体来说：

• 当箭头函数使用大括号包裹函数体时，属于「显式函数体」写法，必须通过return语句明确返回值，否则函数默认返回undefined。
• 如果你去掉大括号，写成(prev) => prev + 1，这是「隐式返回」写法，箭头会自动把后面的表达式结果作为返回值。

回到你的代码里：

setClickCount((prev) => {prev + 1})

这里的回调函数里，prev + 1只是一个计算表达式，但没有用return返回结果，所以这个函数最终返回undefined。React的useState setter函数收到undefined后，会判定这是一个无效的状态更新，因此不会修改clickCount的值，导致计数器完全没反应。

两种修复方式 #

1. 保留大括号，添加return：

const increment = () => {
    setClickCount((prev) => { return prev + 1 })
}

2. 去掉大括号，使用隐式返回：

const increment = () => {
    setClickCount((prev) => prev + 1)
}

另外提一句，你的useEffect没有设置依赖数组，每次组件渲染都会重复绑定/解绑事件，建议加上空数组[]作为依赖，让它只在组件挂载时执行一次：

useEffect(() => {
    document.addEventListener('mousedown', increment);
    return () => {
        document.removeEventListener('mousedown', increment);
    };
}, []); // 这里添加空依赖数组

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