React中useState更新后console.log未即时生效问题咨询

你的代码如下：

const [selectedGenre, updateSelectedGenre] = React.useState("s");

function update(genre) {
  updateSelectedGenre(genre);
  console.log(selectedGenre);
}
const Genres = (genreIds) => {
  return genreIds.map((genreId, index) => (
    <span
      style={{
        cursor: "pointer",
      }}
      onClick={() => {
        update(genreId);
      }}
    >
      {genreId}{" "}
    </span>
  ));
};

问题原因 #

• React的useState更新是异步批量执行的：调用updateSelectedGenre后，React不会立刻修改selectedGenre的取值，而是将更新任务放入队列，等当前事件循环的同步代码执行完毕后，才会批量更新state并触发组件重新渲染。
• 当前的update函数属于组件当前渲染周期的闭包，它捕获的selectedGenre是这一轮渲染时的旧值。所以在调用updateSelectedGenre后立刻打印，输出的还是未更新前的默认值s。
• 第二次点击时，组件已经完成重新渲染，新的update函数是新渲染周期的闭包，捕获的是更新后的selectedGenre，因此能输出正确的新值。

解决办法 #

1. 直接打印传入的新值：如果只是要确认即将设置的state值，直接打印update函数的genre参数即可，它就是你要更新的目标值：

function update(genre) {
  updateSelectedGenre(genre);
  console.log(genre); // 直接输出新值
}

2. 用useEffect监听state变化：如果需要在state更新完成后执行依赖新state的逻辑，使用useEffect监听selectedGenre的变动，每次state更新后都会触发回调：

React.useEffect(() => {
  console.log(selectedGenre); // state更新后执行
}, [selectedGenre]);

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