Question

试图显示从api响应接收到的数据的长度。但是它说无法读取undefined属性


async  componentDidMount() {
        Users.getAppAuthUser(1,true).then((res)=>{
            this.setState({data:res});
            this.setState({loading:false});
        })
        console.log(this.state.data);

}
render() {
    return (
         <div >                    
            <span >({  this.state.data ===[] ?    0 :  this.state.data.accounts.length })
            </span>
        </div>
    )
}

Answer 1

我认为您可以做的是

<div>
{ this.state.data && <span> {{this.state.data.length}} </span> }
</div>

Answer 2

有时可能会发生，因为在渲染过程中，状态尚未完成，因此无法获得状态中键的全部属性。在这种情况下，它尚未完成加载data，因此length不可用。

async之前的componentDidMount在这里无效。

state = {
  data: [], loading: false
}

componentDidMount() {
    Users.getAppAuthUser(1, true).then((res)=> ({
        this.setState({data: res, loading:false});
    }))
}

render() {
    return (
        <div>                    
            {this.state.data && <span>{this.state.data.accounts.length}</span>}
        </div>
    )
}

如果此行不起作用，{this.state.data && <span>{this.state.data.accounts.length}</span>}则执行以下操作：

{this.state.data && this.state.data.accounts && <span>{this.state.data.accounts.length}</span>}

如果您使用lodash，则可以导入get：

import get from 'lodash.get';

...

<div>                    
  <span>{get(this.state, 'data.accounts.length', null)}</span>
</div>

Answer 3

导致未定义的原因不是对async / await的正确使用。 Read to get more info bro

    async componentDidMount() {
        const response = await fetch(`https://api.coinmarketcap.com/v1/ticker/?limit=10`);
        const json = await response.json();
        this.setState({ data: json });
    }

您应该像这样使用它

无法读取reactjs中未定义的属性'length'

3 个答案: