如何在setState中同時編輯數組中對象的特定字段

Question

我們如何在數組中創建對象的特定字段？

這是我想要部分更新的狀態數據。

state.items = [
     {id:0, left: 100, right: 100, classified: true},
     {id:1, left: 200, right: 300, classified: false}, 
]

這是setState之后的預期結果。

// Edit left, right, classified with given values,
// where the object's id is equal to 1.
state.items = [
     {id:0, left: 100, right: 100, classified: true},
     {id:1, left: 300, right: 200, classified: true}, 
]

這是函數內部的代碼（問題）

//console.log(id) <- prints 1. We are modifying the second object in the array with id 1.

// iterate items array
let { items } = this.state;
for (var index in items) { 
  if(items[index].id === id) {
     // copy the whole object matching id is 1.
     var deep = _.cloneDeep(tag); 

     //Assign new values (newLeft: 300, newRight:200, newCalssified: true)
     deep.left = newLeft
     deep.right = newRight
     deep.classified = newClassified

    this.setState({
      // HERE IS THE QUESTION
      taggedClothes // how do we modify the object with id 1??
    })
  }
}

謝謝！！

Answer 1

您需要修改整個items數組，然后執行setState來更新整個items數組。

const items = _.cloneDeep(this.state.items);

// Find index to modify
const index = items.findIndex(i => i.id === id);
items[index].left = newLeft;
items[index].right = newRight;
items[index].classified = newClassified;

this.setState({items});

編輯：如下所述，改變狀態並不總是一個好主意。 我在開頭添加了一個_.cloneDeep ，但是看看這篇文章了解更多信息和其他選項： React：如何在setState上更新state.item [1]？ （用JSFiddle）

Answer 2

@klugjo的答案是正確的，但要更改引用，要對當前狀態進行深度克隆以更改狀態：

const {items} = _.cloneDeep(this.state);

// Find index to modify
const index = items.findIndex(i => i.id === id);
items[index].left = newLeft;
items[index].right = newRight;
items[index].classified = newClassified;

this.setState({ items });

Answer 3

如前面的答案中所述，您必須修改整個items數組。 這是使用reduce以更清潔的方式執行相同操作的另一種方法。

this.setState({
  items: this.state.items.reduce(function(acc, item) {
    if (item.id === id) {
      item.left = newLeft;
      item.right = newRight;
      item.classified = newClassified;
    }
    acc.push(item);
    return acc;
  }, [])
});