对对象进行状态更新

Question

如果我的状态下以下Person对象

xmdp:plan

以下内容有效吗？？

this.state = {
    Person: {
        FirstName: "John",
        LastName: "Doe"
    }
}

如果没有，为什么？

Answer 1

首先，不建议在this.state之外的其他位置直接分配constructor。您应该始终使用setState API更新状态。

您的答案是，这样做是有效的，但是正确的方法是使用this.setState。

在您的情况下，您应该将名字更新为以下名称：

let person = this.state.Person;
this.setState({
    Person: {
        ...person,
        FirstName: "Jane"
    }
}) 

Answer 2

这与状态管理方式以及数据如何流向组件有关。

更新状态的正确方法是：

this.setState({...})

您可以了解有关此here

的更多信息

Answer 3

您应该像这样将组件的setState与this.setState一起使用

this.setState(state => ({
  Person: {
    ...state.Person,
    FirstName: 'Jane'
  }
}))

这样，您可以使状态保持不变并正确地重新呈现。不建议直接更改状态。

Answer 4

@ZeroDarkThirty

您的方式显然是有效的，但不建议这样做。为什么：

• 根据React的约定，状态是不可变的（请勿更改 原始状态对象）。因此，每当您要进行更改时， 应该向其中添加一些内容，而不是对其进行完全更改。

• 并且，状态是使用新数据重新呈现组件的方法。 所以， 反应的 setState（）方法更新您的状态，并且在状态更新时，组件将 重新渲染。

  this.setState(state => ({
     Person: {
      ...state.Person,
      FirstName: 'Jane'
     }
  }))