React useEffect迭代中setState赋值item.id全为初始值问题求助

嘿，这个问题我太熟了！你遇到的核心问题其实是React状态更新的异步性加上闭包陷阱，咱们一步步拆解来看：

为什么所有item.id都是0？ #

在你的map循环里，每次访问的lastIndex都是初始值0，原因有两个：

1. React的setLastIndex是异步批量更新的，调用它不会立刻改变当前作用域里的lastIndex值；
2. 整个map执行时，闭包捕获的是useEffect首次执行时的lastIndex（也就是0），所以哪怕你多次调用setLastIndex，当前循环里的lastIndex始终是0，最终所有item的id都被设为0。

而且直接修改原item对象（item.id = lastIndex）也不符合React的不可变数据原则，可能会带来后续的意外问题。

解决方案 #

根据你的需求，这里提供两种靠谱的解决方式：

方案1：直接使用map的索引（简单快速） #

如果你的数据不需要后续排序、删除等操作，或者只是需要临时的唯一id，直接用map自带的第二个参数（索引）就足够了：

const SearchAppointments = React.memo(() => { 
  const [data, setData] = useState([]) 

  useEffect(() => { 
    const fetchData = async() => { 
      const response = await fetch('../data.json'); 
      const result = await response.json(); 
      // 使用map的索引作为id，同时返回新对象避免修改原数据
      const tempData = result.map((item, index) => ({
        ...item,
        id: index
      }));
      setData(tempData); 
    }; 
    fetchData(); 
  }, []); 

  return <div></div>; 
})

方案2：基于lastIndex状态批量计算id（适合需要持续自增的场景） #

如果你的业务需要lastIndex状态保持持续递增（比如后续新增数据也要用这个自增id），那应该先批量计算所有id，再一次性更新状态：

const SearchAppointments = React.memo(() => { 
  const [data, setData] = useState([]) 
  const [lastIndex, setLastIndex] = useState(0) 

  useEffect(() => { 
    const fetchData = async() => { 
      const response = await fetch('../data.json'); 
      const result = await response.json(); 
      // 基于当前lastIndex，批量计算每个item的id
      const tempData = result.map((item, index) => ({
        ...item,
        id: lastIndex + index + 1 // +1是从lastIndex的下一个值开始自增
      }));
      // 一次性更新lastIndex到最后一个id的值
      setLastIndex(prev => prev + result.length);
      setData(tempData); 
    }; 
    fetchData(); 
  }, [lastIndex]); // 依赖lastIndex，确保拿到最新的状态值

  return <div></div>; 
})

关键提醒 #

• 永远不要直接修改原数据对象，要用扩展运算符（...item）返回新对象，保持React的不可变数据模式；
• React状态更新是异步的，不要在循环中逐个调用setState，应该先计算好所有需要更新的值，再一次性执行状态更新。

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