Reactjs object 数据即使在 console.log 中显示数据后仍显示未定义

Question

When i run this code, it should render

Hello World!

But it render,

Loading...

Here is my code:

import React, { Component } from 'react';

class GroupsHomePage extends Component {
    constructor() {
        super()
        this.state={
            groupInfo:[]
        }
    }
    componentDidMount(){
        let store = JSON.parse(localStorage.getItem('login'))
        var url = 'http://127.0.0.1:8000/myapi/groupsdata/'+this.props.groupId+'/?format=json'
        fetch(url,{
            method:'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Token '+store.token,
            },
        })
        .then(res=>res.json().then(result=>{
            this.setState({groupInfo: result})
        }))
    }
    render() {
        console.log(this.state.groupInfo)
        if(this.state.groupInfo.length){
            return (
                <div>
                     <p>Hello World!</p>
                </div>
            );
        }else{
            return(
                <div className='container'>
                    <p>Loading...</p>
                </div>
            )
        }
        
    }
}

export default GroupsHomePage;

When i run the code, in console it shows:

[ ]

{id: 6, name: "ffff", member: 0, admin: {id: 7, first_name: "test6", last_name: "test6"}}

why it shows Loading... instead of Hello World! ?

Answer 1

You are checking if "groupInfo" has the length property. This property is usually associated to an array or a string type. In this case, I think "groupInfo" is an object type, so it doesn't have this length property. I suggest to change the condition and check if "groupInfo" has the id property for example:

if (this.state.groupInfo.id) {
   ...
}

Another approach could be to convert that object in an array and check for its length, like this:

if (Object.keys(this.state.groupInfo).length) {
   ...
}

Answer 2

So firstly your default groupInfo state should be an empty object in constructor like this groupInfo:{}

And to check length your 'if' condition would be this

if(Object.keys(this.state.groupInfo).length > 0)

This condition is used for JSON object keys different from Array

Answer 3

Try this. console.log(typeof(this.state.groupInfo))

I think groupInfo is of object type.

So in console if you see the output of above line object then change the if condition to

        if(this.state.groupInfo){

---

Also you should not use

if(this.state.groupInfo.length !== 0){

if you have groupInfo already defined as []. Because it will give you true and i think you only want to run this if condition when you have some data in groupInfo array.

 if(this.state.groupInfo.length !== 0){

Is good way

Answer 4

Looks ok, the API might lie to you...

Before you check length

if(this.state.groupInfo.length){
    ...
}

make sure the structure groupInfo is array of objects.