React中循环调用添加子组件方法仅添加列表最后一项，是什么原因？

问题原因 #

你遇到的问题是React状态更新的异步批处理 + 闭包捕获旧值导致的：

• 你在forEach中循环调用handleAddFields时，handleAddFields内部使用的hobbyFields是当前渲染周期闭包里的旧值，所有的状态更新都基于同一份旧数组做扩展。
• React会对同一个事件循环内的多次状态更新做批处理，前面的更新结果会被后面的覆盖，最终就只剩下最后一次添加的元素。

另外你写的onHobbyFieldChange函数存在直接修改原state对象的问题，不符合React状态不可变的规范，后续可能引发其他不可预期的渲染问题。

修复方案 #

1. 修复批量添加丢失的问题 #

将handleAddFields改为使用函数式更新的形式，每次更新都基于上一次最新的状态计算：

const handleAddFields = (hobbyName) => {
    setHobbyFields(prevHobbyFields => [...prevHobbyFields, { id: uuidv4(), hobbyName }]);
};

2. 优化修改状态的写法（可选，推荐） #

修改onHobbyFieldChange，避免直接修改原state对象：

const onHobbyFieldChange = (id, event) => {
    const newHobbyFields = hobbyFields.map((hobbyField) => {
      if (hobbyField.id === id) {
        // 返回新对象，不修改原有state中的对象
        return {...hobbyField, hobbyName: event.target.value}
      }
      return hobbyField;
    });
    setHobbyFields(newHobbyFields);
};

3. 更高效的批量添加方案（可选） #

如果是批量添加，不需要循环调用单次添加函数，直接一次性计算新数组更新状态，性能更好：

const onHobbySelectedCallback = (listHobby) =>{
    if(listHobby?.length){
      // 批量生成要添加的新字段
      const newHobbyList = listHobby.map(hobby => ({id: uuidv4(), hobbyName: hobby}))
      setHobbyFields(prev => [...prev, ...newHobbyList])
    }
}

内容的提问来源于stack exchange，提问作者Lộc Trần Phước