时间戳

首页 > 解决方案 > 在状态内部定义的数据和在构造函数内部创建的外部状态有什么不同？

javascript - 在状态内部定义的数据和在构造函数内部创建的外部状态有什么不同？

问题描述

你能向我解释一下关于状态内部和外部状态的数据的不同之处吗： 

constructor(){
this.data1 = "this is data 1", 
this.state = {
this.data2 = "this is data 2"}
}

因此，如果我在 componentDidMount 或渲染函数中使用 data 2 而没有任何条件代码，它会抛出描述 React 不能允许无限循环 bla bla bla 的错误，但如果我在 componentDidMount 或渲染函数中使用 data1，它会完美运行。那么差异网络是什么？我应该使用 data1 让自己获得更多的灵活性吗？

标签： javascriptreactjsstate

解决方案

  1. 这是一个有效的语法

    constructor(){
   this.data = "this is data 1"; 
}

  2. 这不是有效的语法

    constructor(){
  this.state = {
    this.data = "this is data 2"
  } 
}

  3. 但是，这是有效的

    constructor(){
   this.state = {
     data: "this is data 2"
  } 
}

所以这有什么区别。

1 是有效的，但是在更改值this.data = 'Some new value'时不会触发组件渲染，如果您在 jsx/html 中显示此值，则除非其他状态更改触发渲染功能，否则不会反映更新后的值。

3 是定义状态变量的方式，您永远不应该mutate或直接更新状态，例如this.state.data = 'some value'. 您需要更新this.setState({ data: 'some new value' })将触发渲染功能的值

推荐阅读