React中如何合并两个API响应数据？合并对象无效问题求助

你当前用{...pastData, ...latestData}合并的方式之所以不符合预期，是因为对象扩展运算符会让后面对象的同名属性覆盖前面的——latestData.data直接替换了pastData.data，所以最终的data只是6条数据，而不是合并后的9条。

要实现你想要的结果，需要手动合并两个data数组，同时保留loading状态（这里两者都是false，取任意一个即可）：

const combinedResponse = {
  loading: pastData.loading,
  data: [...pastData.data, ...latestData.data]
};

如果需要兼容其中一个请求还在加载的场景，可以补充状态判断：

const combinedResponse = {
  // 只要有一个请求在加载，整体就处于加载状态
  loading: pastData.loading || latestData.loading,
  // 加载中的请求没有data，只取已完成的data；都完成则合并
  data: pastData.loading 
    ? latestData.data 
    : latestData.loading 
      ? pastData.data 
      : [...pastData.data, ...latestData.data]
};

这样处理后就能得到你期望的{loading: false, data: Array(9)}结构。

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