如何在React useState中新增或更新数组内的对象键值对？

首先纠正你代码里的几个问题：

1. 初始化useState([{}])没必要，这个空对象会干扰后续的id判断，建议直接初始化为空数组：const [status, setStatus] = useState([])。
2. 第一个useEffect里的错误是语法问题：setState的函数式更新只需要传入一个返回新状态的函数，你写成了传两个参数，而且变量名应该是setStatus而非setTransitionKeys。
3. 第二个map写法的问题：当元素id不匹配时没有返回原元素，会导致数组中出现undefined，必须补充return value来保留原数组的其他元素。

更优的单对象处理方案 #

如果每次onChange返回单个{id, statuses}对象，推荐用函数式更新+findIndex的方式，既避免闭包导致的旧状态问题，逻辑也更清晰：

const [status, setStatus] = useState([]);

const handleChange = (onChangeData) => {
  setStatus(prevStatus => {
    const targetIndex = prevStatus.findIndex(item => item.id === onChangeData.id);
    
    if (targetIndex !== -1) {
      // 存在对应id，更新statuses
      const newStatus = [...prevStatus];
      newStatus[targetIndex] = { ...newStatus[targetIndex], statuses: onChangeData.statuses };
      return newStatus;
    } else {
      // 不存在对应id，新增对象
      return [...prevStatus, onChangeData];
    }
  });
};

批量对象处理方案（适配onChange返回数组的场景） #

如果onChange返回的是对象数组，需要批量更新/新增，用Map来优化查找效率（将O(n)的查找复杂度降到O(1)）：

const handleBatchChange = (onChangeDataArray) => {
  setStatus(prevStatus => {
    // 把旧数组转成以id为key的Map，方便快速定位
    const statusMap = new Map(prevStatus.map(item => [item.id, item]));
    
    // 遍历新数据，更新或新增到Map中
    onChangeDataArray.forEach(item => {
      if (statusMap.has(item.id)) {
        statusMap.set(item.id, { ...statusMap.get(item.id), statuses: item.statuses });
      } else {
        statusMap.set(item.id, item);
      }
    });
    
    // 将Map转回数组返回
    return Array.from(statusMap.values());
  });
};

方案优势 #

• 函数式更新确保每次都基于最新的状态进行修改，避免因闭包导致的状态不一致问题。
• 单对象场景用findIndex定位元素，逻辑直观；批量场景用Map优化性能，适合数据量较大的情况。
• 全程保持不可变更新，符合React状态管理的最佳实践。

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