如何在 ReactJS 中更新對象的 setstate

Question

我有兩個對象：第一個狀態

[{ "orders": [{ "id": "1587881", "uid": "237603" }, { "id": "1587880", "uid": "237603" }] }]

並添加新數據

[{ "orders": [{ "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }]

我需要獲得新的狀態

[{ "orders": [{ "id": "1587881", "uid": "237603" }, { "id": "1587880", "uid": "237603" }, { "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }]

請幫助我！

我試試

import React, { Component } from 'react';

class Orders extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [{ "orders": [{ "id": "1587881", "uid": "237603" }, { "id": "1587880", "uid": "237603" }] }]
    };
  }

  loadingData = () => {
    const add = [{ "orders": [{ "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }];
    this.setState({ data: [...this.state.data, ...add] });
  }

  componentDidMount() {
    this.loadingData();
  }

  render() {

    console.log(this.state.data);


    return (
      <div className="page" >
      </div>
    );
  }
}

export default Orders;

但是我沒有得到單個數據數組……創建了兩個單獨的數組。 我怎樣才能解決這個問題？

PS 我正在接收這種格式的數據，但我無法修復對象的格式。

Answer 1

您是說狀態data是一個對象數組，此響應假設您將向該數組的相同第一個索引添加訂單。

loadingData = () => {
    const add = [{ "orders": [{ "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }];
    this.setState(oldState => {
      const newData = { ...oldState.data };
      add[0].orders.forEach(x => newData[0].orders.push(x));
      return { data: newData };
    });
  }

Answer 2

這是一個工作示例： https : //codesandbox.io/s/elated-lederberg-i3rtb?file=/src/App.js

您可以對數組的第一個元素進行解構，然后按照您想要的方式重建。

  const array1 = [
{
  orders: [
    { id: "1587881", uid: "237603" },
    { id: "1587880", uid: "237603" }
  ]
}
];
const array2 = [
{
  orders: [
    { id: "1587879", uid: "237603" },
    { id: "1587878", uid: "237603" }
  ]
}
];

const [firstEl] = array1;
const [secondEl] = array2;
console.log([{ orders: { ...firstEl.orders, ...secondEl.orders } 
}]);