反应状态不确定伴随功能

Question

试图构建一个反应实验。我面临着无法访问的class.state的问题。我的Codepen笔中的整个代码：https：//codepen.io/godje/pen/jnqvad

在第115行上，您可以看到我将this绑定到方法：

this.generateQuestion = this.generateQuestion.bind(this);

在200和201上，我正在检查this是否指APP类，而不是函数范围。而且确实如此，但不在this.state上。

console.log(this); //success. Return App object, which HAS "state" key
console.log(this.state); //undefined. Even though, It refers 
                         //to the object that has a "state" key 
                         //it doesn't return it for some reason.

我需要该状态才能访问。有什么问题？

Answer 1

您在构造函数中写了以下代码：

this.state = {
  gameState: {
    state: "intro",
    quest: this.generateQuestion(),
    score: 0,
    round: 0,
    time: 3
  }
}

GERTATEQUESTION 将首先调用，在执行初始状态后，即 this.State 将设置在组件中，这就是为什么您会得到Undefined。

Answer 2

您的绑定太多。我修复了您的代码，仅与此分叉Codepen中的生成标语函数有关。通常，我会添加代码段，但是随着如何将其绑定在一起，我将仅解决这个概念。

在React中，您就像在构造函数中一样绑定所有功能 - 使用this.exampleFunction = this.exampleFunction.bind(this);。从这里，您可以通过在SetState函数中使用React的构建来维护状态(在此处的文档中更多地阅读(。

不要像您在整个代码中一样按直接定义设置状态(例如this.state.gameState.score = 0;。使用SetState时，请记住，定义的任何对象都将作为整体对象进行更新(也在链接的文档中进行了讨论(。

最重要的是，当您从第110行和其他一些地方开始回弹功能时，您会失去绑定。这就是使您无法访问国家的原因。您会注意到我摆脱了generateQuestion上的其他绑定以使其工作。

设置变量以保持您需要采取的结果，例如let answer = this.handleAnswer();。然后将任何用于渲染目的保留的东西设置为组件状态。您可以将其他非渲染信息保存到课程中，而不必担心这样的绑定：this.additionalAttribute = 'string-in-this-case';。这些附加属性不会触发更新事件 - 请记住这一点。

专注于设置所有状态遵循React推荐的setState功能。并停止在构造函数之外重新启动功能。使用变量，其他属性分配，最重要的是 - 根据需要的状态更大。

Answer 3

通过运行调试器，我发现 console正在显示 app 对象的延迟图像。在调用this.state的点，尚未定义应用程序中的state，而是在定义的过程中，因为我们在初始化state对象时调用了函数并从其返回值。该修复程序不是直接解决问题，而是解决了我面临的问题。我更改了该函数以检查this.state是否存在，如果不存在，则我将变量的值分配为应在>首次访问的上发生的变量(因为 call this.state的第二个已经定义了，并且可以访问(。我将进一步开发该项目，但现在答案在于207的行：

state = this.state ? this.state.gameState.state : "intro";

如果定义了状态，则将继续采用gameState的值。但是，如果不是这样，它将占据"介绍"的价值，即我希望它在开始时的价值。经过测试和工作。

感谢该线程的每个贡献者。感谢Ritesh Bansal通过解析代码提及对象的状态。