如何访问构造函数内部的状态答案

【问题标题】：How to access state inside constructor如何访问构造函数内部的状态
【发布时间】：2019-12-03 11:21:16
【问题描述】：

我想在多个地方访问构造函数中的状态值。当我在构造函数中使用 console.log(this) 时，我可以看到可以访问特定值，但是当我 console.log this.state 时，我得到未定义。

这就是我想象中的工作方式（我想访问 CSSValue 中的状态）：

constructor(props) {
  super(props);
  this.state = {
    colors: {
      SheetColor: "#FFFFFF"
    },
    CSSValue: '.qvt-sheet{\n background:' + $(this.state.colors.SheetColor) + '!important;\n}'
  }
}

但是当我运行这段代码时：

constructor(props) {
  super(props);
  this.state = {
    colors: {
      SheetColor: "#FFFFFF"
    },
    CSSValue: '.qvt-sheet{\n background:' + $(console.log(this)) + '!important;\n}'
  }
}

然后我在控制台中得到这个：

但是当我将 console.log 更改为 console.log(this.state) 时，它会打印 undefined。

我可以访问例如this.props 没有任何问题。但不知何故，我无法在 console.log 中访问 this.state。

【问题讨论】：

为什么字符串中有'$'符号？它有什么作用？

标签： javascript reactjs

【解决方案1】：

您无法在构造函数中读取状态。即使你可以，你的使用也行不通。您正在分配以声明对象文字表达式。在此表达式中，您使用 this.state 来引用您在所述对象文字表达式中设置的颜色。这种循环引用是不可能的，因为在分配给this.state之前，必须对整个表达式求值。

console.log(this) 时可以看到state 的原因是您记录了对组件的引用。一旦在组件上设置了状态，它将显示在 DevTools 中。当您console.log(this.state) 时，此时this.state 是undefined，因此您将注销undefined 而不是对状态对象的引用。

还有一点：您正在混合常规字符串和模板文字语法。你应该这样做：

`.qvt-sheet{\n background: ${this.state.colors.SheetColor} !important;\n}`

【讨论】：