ReactJS：两次API调用更新同一对象是否存在冲突风险？

你的担忧完全合理——当前实现确实存在状态更新被覆盖的风险，React并不会自动帮你防范这类冲突。让我一步步拆解问题原因，再给出可行的优化方案：

为什么会出现冲突？ #

你的代码存在两个核心问题：

1. 直接复用状态引用：let newLabs = labsAllTypes并没有创建新对象，只是拿到了状态的引用。修改newLabs的字段本质是在修改原状态对象，违反了React状态不可变的原则。
2. 闭包捕获过时状态：两次API调用是异步执行的，当回调触发时，它们捕获的labsAllTypes可能还是初始的旧值。比如：
   • 初始labsAllTypes为{}
   • 第一个API返回后，回调用旧的{}添加tr字段并更新状态
   • 第二个API返回后，回调依旧用旧的{}添加edu字段并更新状态
     最终状态会变成{edu: ...}，tr字段被完全覆盖。

React为什么不会自动防范？ #

React的状态更新逻辑是基于你传递给useState更新函数的值。如果这个值是基于闭包捕获的过时状态计算而来，React无法自动感知并修正——它只会严格按照你提供的值完成更新。

优化方案 #

方案1：使用函数式状态更新（推荐） #

useState的更新函数支持传入回调，这个回调会接收最新的当前状态作为参数，返回新状态。这样每次更新都基于最新状态，不会出现覆盖：

getAllTRLabs((data) => {
  setLabsAllTypes(prevLabs => ({
    ...prevLabs,
    tr: data.translation_labs
  }));
}, (err) => console.log(err));

getAllEduLabs((data) => {
  setLabsAllTypes(prevLabs => ({
    ...prevLabs,
    edu: data.eduLabs
  }));
}, (err) => console.log(err));

这里用对象展开运算符...prevLabs创建新对象，保证状态不可变性，同时每次更新都基于最新状态，两个更新会被React安全合并处理。

方案2：并行调用API后一次性更新 #

如果两个API调用无依赖关系，你可以将它们包装成Promise，用Promise.all等待所有请求完成后一次性更新状态，减少状态更新次数：

先把回调风格的API转为Promise风格：

const getAllTRLabsPromise = () => {
  return new Promise((resolve, reject) => {
    getAllTRLabs(resolve, reject);
  });
};

const getAllEduLabsPromise = () => {
  return new Promise((resolve, reject) => {
    getAllEduLabs(resolve, reject);
  });
};

然后并行调用并更新状态：

Promise.all([getAllTRLabsPromise(), getAllEduLabsPromise()])
  .then(([trData, eduData]) => {
    setLabsAllTypes(prevLabs => ({
      ...prevLabs,
      tr: trData.translation_labs,
      edu: eduData.eduLabs
    }));
  })
  .catch((err) => console.log(err));

这种方式适合不需要单独处理每个API加载状态的场景，能减少组件重渲染次数；如果需要分别处理每个请求的加载/错误状态，方案1会更灵活。

总结 #

• 你的担忧是正确的，当前代码确实存在状态覆盖风险
• 函数式状态更新是解决这类问题的标准方案，能确保每次更新基于最新状态
• 也可以用Promise.all合并请求后一次性更新，优化状态更新次数

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