更新ReactJS状态数组

Question

我有一个ReactJS组件，可以呈现订单列表。 我从REST API获得订单。 数据格式如下：

{
    "count": 2,
    "orders": [
        {
            "order_number": 55981,
            "customer_number": 24742
        },
        {
            "order_number": 55980,
            "customer_number": 24055
        }
    ]
}

每个订单可以有一个项目列表。 当我点击订单时，我得到以下格式的物品清单：

{
    "count": 2,
    "items": [
        {
            "name": "Green pillow",
            "status": "pending"
        },
        {
            "name": "Red pillow",
            "status": "delivered"
        }
    ]
}

订单列表会自动刷新，并且可以随时更改，因此我将订单列表存储在this.state ，该列表通过ajax进行更新。 this.state看起来像这样：

{
    "orders": [
        {
            "order_number": 55981,
            "customer_number": 24742
        },
        {
            "order_number": 55980,
            "customer_number": 24055
        }
    ]
}

我的问题是，我想在单击订单时更新状态，以便所单击的订单包含与该订单关联的项目。 单击项目后，订单列表将如下所示：

{
    "count": 2,
    "orders": [
        {
            "order_number": 55981,
            "customer_number": 24742,
            "items": [
                {
                    "name": "Green pillow",
                    "status": "pending"
                }
            ]
        },
        {
            "order_number": 55980,
            "customer_number": 24055
        }
    ]
}

如何使用this.setState（）将商品添加到特定订单？ 问题是setState似乎使用键更新数据，但是我的命令位于数组中。 我可能可以复制整个数组，然后将项目关键字放入其中，但这似乎有些过分。 我采用错误的方法吗？

Answer 1

我不完全确定我有您的问题，但我认为您要实现的目标是向位于您所在州的数组（推送）添加新订单。

如果是这种情况，则应该这样：

// since you're orders it's not a plain array, you will have
// to deep clone it (e.g. with lodash)

let orders = _.clone(this.state.orders);
orders.push(newOrder);
this.setState(orders);

为什么在更改状态之前先克隆状态很重要？

不变性具有一些出色的属性（例如，简单的相等性比较），React团队正朝着这个方向努力，以不断提高性能。

从React 0.13开始，不调用this.setState突变state将触发警告，并且它将在React的未来完全中断（请参阅docs ）

希望这可以帮助

Answer 2

制作当前状态的副本，修改副本并将其用作新状态。

这只是一个简单的例子。 您可能要添加一些缓存逻辑，这样当用户多次单击同一订单时，不必一次又一次地检索订单的项目。

var updatedOrder = _.clone(this.state.orders);

updatedOrder[0]["items"] = [ { "name": "Foo", "status":"bar" } ];

this.setState({
  orders: updatedOrder
});