小编典典

React:可以将setState与现有状态对象一起使用吗?

reactjs

可以说我有一个React组件,该组件具有一个带有10个字段的“状态”:

this.state = {
    field1: 1,
    field2: 2,
    ... other fields
    something: 'a'
};

在我的一个事件处理程序中,我决定要更新一个状态字段。这样做是出于某种不良做法吗?

// state has 10 other properties not touched here, and I want them to
// retain their existing values
this.state.something = 'b';
this.setState(this.state);

还是我必须做:

this.setState({
    field1: this.state.field1,
    field2: this.state.field2,
    ... set other fields with current value
    something: 'b'
});

我知道有一些库可以很容易地复制对象状态,只是想知道是否有必要这样做。我还应该补充一点,我已经尝试过了,而且似乎可行,但是我没有在网上看到任何示例可以这样做,所以想知道是否有某些原因不能这样做。


阅读 280

收藏
2020-07-22

共1个答案

小编典典

切勿直接更改this.state,因为此后调用setState()可能会替换您所做的更改。将此this.state视为不可变的。

使用Object.assign的克隆对象

const newState = Object.assign({}, this.state, {
  something: 'b'
})

this.setState(newState)

或者,您可以合并当前状态:

this.setState({
  something: 'a',
  something2: 'b', 
})
2020-07-22