更新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
});