如何在反应中设置 object state

Question

I have the following code:

this.state = { 
    user: null
}

If the user has a name property how would I set it knowing that this.setState({user.name: 'Bob') won't work.

Answer 1

this.setState({ user: {...this.state.user, name: 'Bob'} });

Answer 2

const copy = {...this.state.user}
copy.name = 'Bob'
this.setState({ user: copy })

and if you don't want to override existing properties like say age do this

const copy = {...this.state.user}
copy.name = 'Bob'
this.setState({ user: { ...user, name: copy } })

Answer 3

You can use spread operator for this like:

this.setState(prevState => ({
    user: { ...prevState.user, name: 'Bob' }
}))

For more info:

• Using State Correctly

Answer 4

user itself is probably an object so you can set the state of user to an object

this.setState({ user: { name: "bob" }})

or

this.state = { 
user: {
    name: "bob"
    }
}

Answer 5

If your state contains an object, then you can update the value of nested state using the javascript spread operator. Other user parameters will not be affected.

this.setState({
...this.state,
  user: {
   ...this.state.user,
   name:'Bob'
  }
})