更新ReactJS狀態數組

我有一個呈現訂單列表的ReactJS組件。我從REST API獲得訂單。數據格式如下：更新ReactJS狀態數組

{ 
    "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似乎使用鍵更新數據，但我的命令是在一個數組中。我可以複製整個數組，並把項目的關鍵，但似乎矯枉過正。我採取了錯誤的做法嗎？

來源

2015-10-14 Michael

我不完全確定我得到了你的問題，但我認爲你試圖實現的是將新的訂單添加到位於你的狀態的數組（推）。

如果是這樣的話，你應該是這樣的：

// 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團隊正朝着這個方向努力，以提高性能。

由於陣營0.13變異state，而無需調用this.setState將觸發一個警告，它會在陣營未來的某個時候完全打破的（見the docs）

希望這有助於

來源

2015-10-14 18:26:28 domokun

使當前的副本狀態，修改副本並將其用作新狀態。

這只是一個簡單的例子。您可能需要添加一些緩存邏輯，這樣當用戶多次點擊同一訂單時，您不必一次又一次檢索訂單的項目。

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

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

this.setState({ 
    orders: updatedOrder 
});

來源

2015-10-14 19:21:28 Jason

這個答案更接近OP的要求，但你需要克隆'this.state.orders'而不是直接指針。你在變異後用相同的對象設置狀態，這會產生副作用。 –

更新ReactJS狀態數組

回答

相關問題