React使用useState更新状态时拿到旧值显示相同内容如何解决？

问题原因 #

React的useState返回的更新函数是异步批量执行的，你在同一作用域内调用setNum后，本次渲染周期内的num变量还是旧值，后续setName(names[num])拿到的永远是更新前的索引，所以会出现值不同步、重复的问题。

解决方案 #

方案1：先计算最新值再更新状态 #

不要依赖本次渲染的旧num值，先计算出更新后的索引，再分别赋值给两个状态：

const Update = (i) => {
  const newNum = num + i;
  // 可加边界判断避免数组越界，示例：if (newNum < 0 || newNum >= names.length) return;
  setNum(newNum);
  setName(names[newNum]);
};

方案2：删除冗余的name状态（更推荐） #

name完全是由num派生出来的状态，不需要单独存储，直接根据num计算即可，既减少冗余代码也不会出现同步问题：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const names = ["Arif", "Afi", "Afzil", "Adil"];
  const [num, setNum] = useState(0);
  // 直接派生name，不需要单独用useState存储
  const name = names[num];

  const Update = (i) => {
    setNum(prev => {
      const newNum = prev + i;
      // 边界判断，避免数组越界，可按需调整
      if (newNum < 0 || newNum >= names.length) return prev;
      return newNum;
    });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{name}</h2>
      {num} <br />
      <br />
      <button onClick={() => Update(1)}>Update</button>
      <br />
      <br />
      <button onClick={() => Update(-1)}>Downdate</button>
    </div>
  );
}

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