我想在构造函数内不止一处访问状态值。 当我在构造函数中使用 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。
最佳答案
您无法读取构造函数中的状态。即使你可以,你的用法也行不通。您正在指定一个对象字面量表达式。在此表达式中,您使用 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}`
关于javascript - 如何访问构造函数内的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57197582/