如何在反应中设置 object state

Question

我有以下代码：

this.state = { 
    user: null
}

如果用户有一个 name 属性，我将如何设置它知道this.setState({user.name: 'Bob')不起作用。

Answer 1

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

Answer 2

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

如果您不想覆盖现有属性，例如说年龄，请执行此操作

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

Answer 3

您可以为此使用扩展运算符：

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

欲了解更多信息：

• 正确使用 State

Answer 4

用户本身可能是 object 因此您可以将用户的 state 设置为 object

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

或者

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

Answer 5

如果您的 state 包含 object，那么您可以使用 ZDE9B9ED708D7E2E1DCEEFFEEFEEFEE87 更新嵌套 state 的值。 其他用户参数不受影响。

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