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

Question

我希望在构造函数中访问一个状态值--不止一个位置。当我在构造函数内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)时，它会打印未定义的内容。

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

Answer 1

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

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

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

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