如何在 ReactJS 中更新对象的 setstate

Question

I have two objects: first state

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

and add new data

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

i need get new state

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

Pleas help me!

I try it

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;

But I am not getting a single array of data ... two separate arrays are created. How can I fix this?

PS I am receiving data in this format and I cannot fix the format of the object.

Answer 1

You are saying that the state data is an array of objects, this response is assuming that you will add orders to the same first index on that array.

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

Here a working example: https://codesandbox.io/s/elated-lederberg-i3rtb?file=/src/App.js

You can do destructering on the first element of the array and then rebuild the way you want.

  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 } 
}]);