React中如何将对象值作为setState的键传入？

你的代码存在两个问题：一是多次调用setState会触发不必要的组件重渲染，二是由于闭包特性，每次循环中展开的...state都是useEffect首次执行时的初始状态快照，最终只会保留最后一次循环的更新结果，前面的键值对会被覆盖。

优化方案 #

直接构建完整的目标状态对象，仅调用一次setState，同时使用函数式更新确保获取最新的状态：

useEffect(() => {
  // 用reduce批量生成需要的键值对
  const newState = inputFields.reduce((acc, item) => {
    acc[item.name] = "";
    return acc;
  }, {});
  
  // 函数式更新，基于最新状态合并新值
  setState(prevState => ({ ...prevState, ...newState }));
}, [inputFields]);

为什么要这么改 #

1. 减少重渲染：单次setState只会触发一次组件更新，比循环中多次调用更高效。
2. 避免闭包问题：函数式更新的prevState会自动传入当前最新的状态值，不会因为闭包导致使用过时的state快照。
3. 逻辑更清晰：批量构建状态对象的方式，能更直观地看到最终要更新的内容，便于后续维护。

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