时间戳

首页 > 解决方案 > 如何在 ReactJS 中更新对象的 setstate

javascript - 如何在 ReactJS 中更新对象的 setstate

问题描述

我有两个对象：第一个状态

[{ "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 我正在接收这种格式的数据，我无法修复对象的格式。

标签： javascriptreactjs

解决方案

您说状态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 };
    });
  }

推荐阅读