调用this.setState（）时是否需要“…this.state”

Question

I can't seem to find a consistent example of how to properly set state in React.

Say, I've got my component that has the state:

state = {
   propertyOne: 'abc',
   propertyTwo: 'def',
   propertyThree: 'ghi',
}

If I wanted to change propertyOne I would (at the moment) do:

this.setState({...this.state, propertyOne: 'new value'})

I assumed this was needed to 'remember' the other two values, however, it appears if I do not include ...this.state the other two values still remain.

this.setState({propertyOne: 'new value'})

So, my question is, do I need ...this.state ? Why do some people on the internet seem to suggest using it?

Answer 1

You don't need ...this.state . this.setState({propertyOne: 'new value'}) is enough. Take a look at the docs

Answer 2

状态更新已合并，请在此处阅读更多有关setState的React文档

Answer 3

The React Docs show, that you do not have to use ...this.state .

In Redux and it's reducers you would do that, to change the store.

Answer 4

The answer is YES if you use an older version of react (I think before version 16 or 15, but not 100% sure which one exactly). If you use version 16 and later, you don't have to

Answer 5

In case when you directly want to update a state value, you don't need to make use of spread syntax to update state. State updates are merged automatically.

However in spread is needed when you want to update a particular state value for instance appending data to an array.

state = {
   data: ['1']
}

this.setState(prevState => ({
    data: [...prevState.data, 2]
}))

Answer 6

As other have answered. this.setState({propertyOne: 'new value'}) is correct. React will automatically copy {propertyOne: 'abc',propertyTwo: 'def', propertyThree: 'ghi'} . And put them in the new state of the function along with the new key and value {propertyOne: 'new value'} . React only updates the key specified in the this.setState()

Important note: If key propertyOne already has the value of 'new value' React will not update the state at all. React does a key value comparison to see if the contents of this.setState() are the same as this.state . React does this to ensure the least number of updates for a component.