时间戳

首页 > 解决方案 > 如何访问构造函数内部的状态

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

问题描述

我想在多个地方访问构造函数中的状态值。当我在构造函数中使用 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。

标签： javascriptreactjs

解决方案

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

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

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

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

推荐阅读