如何在反應中設置 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'
  }
})