React Context状态更新异常：多组件调用仅保留单条数据

核心原因 #

你遇到的问题是因为调用setRepNumbers时直接替换了原有状态，而非基于之前的状态做合并。两个组件异步调用API后更新状态时，后执行的更新会覆盖先执行的——因为它们都基于初始的旧状态赋值，没有保留之前的更新结果。

解决方案 #

根据repNumbers的存储结构（数组/对象），选择对应的合并方式：

情况1：repNumbers是数组（存储多ID对应的数据项） #

如果用数组存储每个ID的数据，更新时要保留原有数组内容，再追加新数据：

// 错误写法（直接替换，会覆盖原有内容）
setRepNumbers([newData]);

// 正确写法（基于之前的状态合并）
setRepNumbers(prevNumbers => [...prevNumbers, newData]);

如果需要避免重复添加同一ID的数据，可以先做存在性判断：

setRepNumbers(prevNumbers => {
  const hasSameId = prevNumbers.some(item => item.id === newData.id);
  if (hasSameId) return prevNumbers;
  return [...prevNumbers, newData];
});

情况2：repNumbers是对象（以ID为键存储数据） #

如果用对象结构，键为数据ID、值为对应数据，更新时要展开原有对象，再添加新的键值对：

// 错误写法（直接替换，丢失原有数据）
setRepNumbers({ [newId]: newData });

// 正确写法（合并原有对象）
setRepNumbers(prevNumbers => ({
  ...prevNumbers,
  [newId]: newData
}));

如果不想覆盖已存在的ID数据，可先判断键是否存在：

setRepNumbers(prevNumbers => {
  if (prevNumbers[newId]) return prevNumbers;
  return { ...prevNumbers, [newId]: newData };
});

关键注意点 #

• 必须使用函数式更新（setState(prevState => ...)）：React状态更新是异步的，直接使用当前状态可能拿到旧值，导致合并逻辑失效。
• 确保两个组件调用的setRepNumbers是Context提供的同一个方法，避免状态不同步。

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