React state undefined with bound function
Trying to build a React experiment. I am facing the problem of unavailable Class.state. All the code in the CodePen: https://codepen.io/Godje/pen/JNQVad
On line 115, you can see the binding this
to the method:
this.generateQuestion = this.generateQuestion.bind(this);
On lines 200 and 201, I check if it is this
in the App class and not in the function scope. And this is necessary, but not on 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.
I need this state to be available. What is the problem?
source to share
You wrote the following code in the constructor:
this.state = {
gameState: {
state: "intro",
quest: this.generateQuestion(),
score: 0,
round: 0,
time: 3
}
}
generateQuestion will be called first, and after executing it, the initial state ie this.state will be set in the component , so you get undefined.
source to share
You are doing too much binding. I have corrected and forked your code ONLY regarding the GenerateQuestion function in this forked CodePen . I would normally add a piece of code, but with how it all relates, I'll just go over the concept.
In React, you link all of your functions in the same way as in the constructor - with this.exampleFunction = this.exampleFunction.bind(this);
. This is where you maintain your state using React build in the setState function (read more about this in the documentation here ).
Don't set state by definition as you are all over your code (eg this.state.gameState.score = 0;
. And when using setstate, keep in mind that any objects defined in its state will be updates as a whole object (also discussed in the linked documentation).
Most importantly, you lost your bindings when you reload functions, starting at line 110 and a few other places. This is what kept you from accessing the state. You will notice that I got rid of the extra bindings on generateQuestion
to make it work.
Set variables to store the result you need to act on, eg let answer = this.handleAnswer();
. Then set whatever you need to keep the component state for rendering purposes. You can store additional information without rendering in a class without having to worry about binding, like this: this.additionalAttribute = 'string-in-this-case';
. These additional attributes will not trigger update events - keep that in mind.
Focusing on setting up all states following the recommended response setState
. And stop reordering functions for yourself outside of the constructor. Use variables, additional attribute assignments, and most importantly, more state as needed.
source to share
After running the debugger, I found myself console
displaying a lazy image of the App object . At the point where the call this.state
, state
in the application is not yet determined, but in the process of determination, because we call the function and returns the value of it WHILE, initializing the object state
. The fix does not fix the issue directly, but fixes the issue I am facing. I changed the function to check this.state
if it exists and if it doesn't mean that the value of the variable will have the one that should happen the first time it is called (because the call time is already defined and available in seconds ). I will develop this project further, but for now the answer lies in the line :this.state
207
state = this.state ? this.state.gameState.state : "intro";
if the state is defined, then it will continue with a value gameState
. But if it doesn't, it will take the "intro" value, which I want it to be at the beginning. Tested and working.
Thanks to every member of this thread. Thanks to RITESH BANSAL for mentioning object state by parsing code.
source to share