为什么构造函数中的`this.state.text =“text”`不能在ReactJS中运行？

Question

为什么我们必须将它设置为像this.state = {text: "text"}这样的对象。是不是做this.state.text = "text"一样？显然，它不是第一个例子有效，第二个没有。这是为什么？谢谢！

Answer 1

我不知道是否有人真正阅读过您的问题，但是从文档“您可以分配this.state的唯一地方是构造函数”。 https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

你有一个不同的问题，this.state = { foo: 'bar' };在构造函数中是可以的，但this.state.foo = 'bar'将无法正常工作，因为this.state未定义。如果你尝试this.state = {}然后this.state.foo = 'bar'它应该适合你。

Answer 2

React为我们提供了使用状态而不会改变它。例如。

this.state.text = 'test' // mutates, it's wrong.
this.setState({text:'test'}) // good to go (without mutating)

因此，您需要定义初始状态，如：

state = {text: 'test'}

但不喜欢，

// obviously state.text is undefined,
// so defining like this
state = {}
state.text = 'test'

---

不要混淆:(两者都相同）

state = {} // inside class without constructor (ES7)
this.state = {} // inside constructor

---

状态包含特定于此组件的数据，该数据可能随时间而变化。状态是用户定义的，它应该是一个普通的JavaScript对象。

如果某些值未用于呈现或数据流（例如，计时器ID），则不必将其置于该状态。这些值可以定义为组件实例上的字段。

访问this link了解更多信息。