时间戳

首页 > 解决方案 > 即使在 console.log 中显示数据后，Reactjs 对象数据仍显示未定义

javascript - 即使在 console.log 中显示数据后，Reactjs 对象数据仍显示未定义

问题描述

当我运行此代码时，它应该呈现

Hello World!

但它呈现，

Loading...

这是我的代码：

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;

当我运行代码时，在控制台中显示：

[ ]

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

为什么它显示Loading...而不是Hello World！?

标签： javascriptreactjs

解决方案

您正在检查“groupInfo”是否具有该length属性。此属性通常与数组或字符串类型相关联。在这种情况下，我认为“groupInfo”是一个对象类型，所以它没有这个length属性。我建议更改条件并检查“groupInfo”是否具有id属性，例如：

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

另一种方法是将该对象转换为数组并检查其长度，如下所示：

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

推荐阅读