Question

假设我的reactjs组件有两种状态：

a: {
    a: 1
},
b: [1, 2, 3]

现在我希望他们成为：

a: {
    a: 1,
    b: true
},
b: [1, 2, 3, 4]

通过以下方式执行此操作是否正确：

this.state.a.b = true;
b = this.state.b.push(4);
this.setState({
    a: this.state.a,
    b: b
});

如果没有，那么适当的方法是什么。

Answer 1

最佳方式。

  this.setState({
    a: Object.assign({}, this.state.a, { b: true }),
    b: [...this.state.b, 4]
  });

Answer 2

应该替换状态属性，而不是变异：

this.setState({
    a: { // create new a object
        a: this.state.a.a,
        b: true
    },
    b: this.state.b.concat([4]) // create new b array
});

Answer 3

直接来自docs：

不要直接修改状态

例如，这不会重新渲染组件：

// Wrong
this.state.comment = 'Hello';

相反，请使用setState（）：

// Correct
this.setState({comment: 'Hello'});

因此，在修改对象之前没有必要复制对象，如果使用setState

所以您的代码可能如下所示：

this.setState({
    a: (this.state.a.b = true),
    b: this.state.b.push(4)
})

Reactjs：在修改对象之前是否需要复制对象？

3 个答案: