Javascript 更新状态数组

我有一个ReactJS组件，用于呈现订单列表。 我从RESTAPI获得命令。数据格式如下所示：

{
    "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
        }
    ]
}

// 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);

我的问题是，当我点击一个订单时，状态会被更新，这样点击的订单就会包含与该订单相关的项目。单击项目后，订单列表将如下所示：

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

如何使用此.setState（）将项目添加到特定订单？问题是setState似乎使用键更新数据，但我的订单是在一个数组中。我可能可以复制整个数组并将items键放入其中，但这似乎有些过分。

---

我是否采取了错误的方法？

我不完全确定我是否理解您的问题，但我认为您试图实现的是向位于您所在州的阵列（推送）添加新订单

如果是这样，您应该这样做：

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

// 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开始，在不调用此命令的情况下，对状态进行变异。setState将触发警告，并在React的未来某个时间完全中断（请参阅）

---

希望这有助于创建当前状态的副本，修改副本并将其用作新状态

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

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

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

this.setState({
  orders: updatedOrder
});

---

这个答案更接近OP的要求，但您需要克隆

This.state.orders

，而不是直接指针。在同一对象发生变异后，您正在设置该对象的状态，这将产生副作用。