ReactJS 中 State 仅每两次点击才更新的问题如何解决？

问题原因 #

• 第一个写法的问题核心是后置自增运算符counter++的运行逻辑：后置自增会优先返回变量的原始值，之后才会对变量本身做加1操作。所以执行setCounter(counter++)时，实际传给state更新函数的是加1前的旧值，React检测到新state和旧state完全一致，就不会触发组件重渲染。只有当前闭包内的counter变量被静默修改，第二次点击时传入的才是上一次闭包内更新后的值，才会触发重渲染，所以会出现点两次才更新一次的现象。
• 第二个函数式写法的问题是没有给setter的回调函数设置返回值：React的useState setter接受函数作为参数时，会将该函数的返回值作为新的state值。你只在回调内部执行了counter++操作，没有返回任何内容，所以新state就被赋值为undefined。

修复方案 #

你可以任选以下任意一种方案修复：

方案1：直接传递计算后的新值 #

const countUp = () => {
  console.log(counter);
  // 不要修改原state变量，直接传入计算后的新值即可
  setCounter(counter + 1);
};

方案2：使用规范的函数式更新写法 #

如果你的新state依赖之前的state值，更推荐使用函数式更新写法，直接返回计算后的新值即可：

const countUp = () => {
  setCounter(prevCounter => prevCounter + 1);
};

如果需要写完整的函数体逻辑，记得添加return语句：

setCounter((prevCounter) => {
  // 这里可以写其他逻辑
  return prevCounter + 1;
});

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