javascript - 更新 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 future 的某个时刻完全中断(参见 the docs )

希望对你有帮助