React中如何更新对象类型的setState实现订单数组合并

错误原因 #

你原有的写法直接拼接了外层的data数组，导致最终state的data变成了包含2个对象的数组，和需求不符：

// 错误运行结果
[
  { orders: [原有两个订单] },
  { orders: [新增两个订单] }
]

你的需求是合并两个对象内部的orders数组，保持外层数组只有1个对象，只需要修改合并逻辑即可，不需要调整数据源格式。

修复后代码 #

只需修改loadingData方法的逻辑即可：

loadingData = () => {
  const add = [{ "orders": [{ "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }];
  // 采用函数式更新setState，确保拿到最新的state值，避免异步更新导致的旧值问题
  this.setState(prevState => ({
    data: [
      {
        // 合并原有orders和新增的orders数组，保持原有顺序
        orders: [...prevState.data[0].orders, ...add[0].orders]
      }
    ]
  }))
}

逻辑说明 #

• 你接收的原有数据和新增数据都是长度为1的数组，第一个元素是带orders属性的对象，所以直接通过下标[0]取到对应对象即可，完全不需要修改数据源格式
• 用展开运算符合并两个orders数组，保持原有订单在前、新增订单在后的顺序，和你给出的预期结果完全一致
• 采用函数式写法更新setState，规避React状态异步更新导致的旧值引用问题，稳定性更高

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