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

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.logconsole.log（this.state）它打印未定义。

我可以毫无问题地访问例如this.props。但我无法this.stateconsole.log.

Answer 1

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

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

还有一点：你混合了常规字符串和模板文字语法。你应该做：

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