Why would my property be undefined on state in React?

Question

My property isLoading is a Boolean on state that I check to determine if the body of my render code is ready to be executed or should wait with a spinning loader. When I examine state in the debugger isLoading is a boolean as it should be but when I further examine just isLoading it is undefined. And this is within the same break point (I have done nothing else other than move my mouse to hover over a different property 1 second away). This is really messing up my code as the isLoading property is then undefined for my if statement right below it, thus it's not waiting on my code to be ready. Can anyone tell me why my isLoading property would be undefined even though when I look at state it's a Boolean??

    render() {
    const {isLoading} = this.state.isLoading;

    if (isLoading) {
        return (<Loader isVisible={true}/>);
    }

Answer 1

isLoading does not actually exist, you probably ment something like this:

if (this.state.isLoading)

but you could also do object deconstructing by doing

const {isLoading} = this.state

then:

if(isLoading)

Answer 2

the issue is with your const {isLoading} = this.state.isLoading;

it need to be const {isLoading} = this.state;

because according to your code const {isLoading} = this.state.isLoading; mean this.state.isLoading.isLoading wish return an undefined value

this should work fine

 render() {
    const {isLoading} = this.state;

    if (isLoading) {
        return (<Loader isVisible={true}/>);
    }

Answer 3

以这种方式使用它const {isLoading} = this.state表示将isLoading的isLoading放入cont变量中的方式未定义

Answer 4

> const {isLoading} = this.state;

This should be the syntax. The above is known as destructuring and was introduced in ES6. In the above syntax, the variable is assigned the value of isLoading from component's state.

What you are trying to do will search for another isLoading within this.state.isLoading .