更新 ReactJS 状态数组

Update ReactJS state array

本文关键字：数组 状态 ReactJS 更新      更新时间：2023-09-26

我有一个呈现订单列表的 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"
        }
    ]
}
订单列表

会自动刷新，并且可以随时更改，因此我将订单列表存储在通过 ajax 更新的 this.state 中。 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 似乎使用键更新数据，但我的订单在数组中。我可能可以复制整个数组并将项目键放入其中，但这似乎有点矫枉过正。我是否采取了错误的方法？

我不完全确定我是否理解了您的问题，但我认为您要实现的是将新订单添加到位于您所在状态的数组(推送(中。

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

// 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 未来的某个时候完全中断(参见文档(

希望这有帮助

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

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

var updatedOrder = _.clone(this.state.orders);
updatedOrder[0]["items"] = [ { "name": "Foo", "status":"bar" } ];
this.setState({
  orders: updatedOrder
});
相关文章：