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

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) 时，它会打印 undefined。

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

Answer 1

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

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

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

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