使用绑定功能未定义反应状态

尝试构建React实验。我面临着无法访问Class.state的问题。整个代码在我CodePen笔：https://codepen.io/Godje/pen/JNQVad 使用绑定功能未定义反应状态

线115，你可以看到我绑定this的方法：

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

线200和201我检查，如果this指的是应用类，而不是到功能范围。并且它是，但不是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.

我需要该状态可访问。问题是什么？

来源

2017-05-31 Godje

如果你可以在这里提供确切的代码片段，它会容易得多。您不必包含所有的代码。 – Umair

我有一个版本在下面工作，但不得不分叉代码，而不是在这里添加代码片段。梳理它只是一点点努力。如果您对此有其他疑问，请告知我。 –

@IsaacB它不起作用。基本上，我需要多次生成问题。在你的情况下，你设置'this.generateQuestion'为它的结果。自动销毁方法基本上。在我的笔上 - 计时器工作。在你的它不是。很显然，如果函数在构造函数中被调用，它将返回状态。但我需要构造函数的状态oustide。我绑定了这个函数，IT做了这个工作，但是由于某种随机原因，它无法获取对象的状态。 – Godje

你已经写了下面的构造函数代码：

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

generateQuestion将被称为第一，其执行初始状态后，即this.state将在组件进行设置，这就是为什么你得到它未定义。

来源

2017-06-01 05:23:08

但由于我有权访问'this'。而'这''有'国家'。为什么我不能访问'this.state'呢？ – Godje

这是由于javascript的提升机制。提升是将变量和函数声明移动到函数作用域顶部（或者如果在任何函数外部的情况下是全局作用域）的机制。这里是可变的生命周期： 1.Declaration 2.初始化 3.使用 this.state声明，但generateQuestion的执行完成时将被初始化之后，你可以使用。 Javascript允许我们在同一时间声明和初始化，就像你一样。但内部正在遵循这种机制。 –

谢谢。我想出了问题。 – Godje

你正在做太多的约束。我修复并分叉了您的代码，只关于此forked CodePen中的GenerateQuestion函数。通常我会添加代码片段，但是如何将它们绑定在一起，我只会解决这个概念。

在React中，您可以像构造函数中那样绑定所有函数 - 与this.exampleFunction = this.exampleFunction.bind(this);。从这里开始，通过使用React的setState函数构建你的状态（更多地阅读the documentation here）。

不要在整个代码中设置直接定义状态（例如：this.state.gameState.score = 0;）。使用setstate时，请记住，任何定义在状态中的对象都将作为整体对象进行更新（链接文档）

最重要的是，当你在第110行和其他几个地方开始时，你在重新启动函数时失去了绑定，这就是阻止你访问状态的原因。删除generateQuestion上的附加绑定以使其起作用

设置变量以保存需要采取行动的结果，例如let answer = this.handleAnswer();。然后设置任何你需要保留的渲染目的到组件状态。您可以将额外的非呈现信息保存到该类中，而无需担心如下绑定：this.additionalAttribute = 'string-in-this-case';。这些附加属性不会触发更新事件 - 请记住这一点。

专注于设置React推荐的setState功能之后的所有状态。在构造函数之外停止重新绑定函数。使用变量，额外的属性分配，最重要的是 - 根据需要更多的状态。

来源

2017-05-31 23:13:12

我做'this.state.gameState.score = 0'的原因是我不想更新整个gameState对象，只是它的一部分。 – Godje

React文档强烈建议不要尝试该方法。即使你只是想更新一个在你的状态中定义的对象的属性 - 你想要克隆该对象，改变属性，并使用'setState（）'更新整个对象：'let gameState = Object.assign （{}，this.state.gameState）; gameState.score = 0; this.setState（{gameState}）;'。 –

谢谢！那是一个好主意。但是，整体并没有解决问题。即使在你的笔中，我也无法访问'this.state'。我需要这个状态是可以访问的。我无法访问该州。考虑到，这整个线程没有任何意义，lol = D – Godje

通过运行调试器，我发现console正在显示延迟图像App对象。在调用this.state时，应用程序中的state尚未定义，但是在定义过程中，因为我们正在调用该函数并从中返回值，同时初始化了对象state。修复不直接解决问题，而是解决了我面临的问题。我改变了功能来检查this.state是否存在，如果它没有，我分配变量的值是应该发生在第一次的通话（因为通过秒时间的呼叫this.state已经定义为并且可以访问）。我将开发这个项目进一步，但现在问题就出在线路207：

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

如果国家定义，那么它将与服用gameState的值进行。但是，如果没有，它会承担起“介绍”的价值，我想让它成为一开始。经过测试和工作。

感谢此线程的每一位贡献者。感谢RITESH BANSAL通过解析代码提及对象的状态。

来源

2017-06-02 20:32:48 Godje

使用绑定功能未定义反应状态

回答

相关问题