Question

我们如何在数组中创建对象的特定字段？

以下是我想要部分更新的状态数据。

points[0][0] = Point(cols*0.05, rows);
points[0][1] = Point(cols*0.4, rows*0.4);
points[0][2] = Point(cols*0.6, rows*0.4);
points[0][3] = Point(cols*0.95, rows);

这是setState之后的预期结果。

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

这是函数内部的代码（问题）

// 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}, 
]

谢谢！

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: How do I update state.item[1] on setState? (with 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;
  }, [])
});

如何在setState中同时编辑数组中对象的特定字段

3 个答案: