React绑定的onClick函数为何仅第二次点击才触发history.push跳转

问题根因 #

React 中 useState 返回的状态更新函数是异步批量执行的，调用 setCurrentSelection 后，当前函数作用域内捕获的 currentSelection 仍是本次渲染的旧值，不会立刻同步为你刚设置的新值。
实际执行逻辑：

• 初始状态下 currentSelection 为默认值（例如空字符串或其他初始值）
• 第一次点击选项时，setCurrentSelection 只是把状态更新请求加入队列，此时执行 history.push("/" + currentSelection) 用的还是旧的状态值，所以跳转路径不符合预期
• 第一次点击结束后，组件完成重渲染，currentSelection 才会更新为你设置的目标值
• 第二次点击相同选项时，函数内拿到的已经是更新后的 currentSelection，跳转路径符合预期，表现为第二次点击才成功跳转

修复方法 #

直接使用传入的参数 optionName 拼接跳转路径即可，不需要依赖刚更新的状态，同时可以删掉冗余的分支判断：

function optionSelected(optionName) {
  setCurrentSelection(optionName);
  history.push("/" + optionName);
}

修改后首次点击即可拿到正确的路径完成跳转，没有额外的性能开销，也简化了代码逻辑。

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