无法读取属性'；长度'；reactjs中未定义的

试图显示从api响应接收的数据的长度。但它表示无法读取未定义的属性

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>
    )
}

异步组件didmount（）{
getAppAuthUser（1，true）。然后（（res）=>{
this.setState（{data:res}）；
this.setState（{loading:false}）；
})
console.log（this.state.data）；
}
render（）{
返回(
（{this.state.data==[]？0:this.state.data.accounts.length}）
)
}

我想你能做的是

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

{this.state.data&&{{this.state.data.length}}

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

数据

，因此

长度

不可用

componentDidMount

之前的

async

在此无效

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>
    )
}

状态={
数据：[]，加载：false
}
componentDidMount（）{
getAppAuthUser（1，true）。然后（（res）=>({
this.setState（{data:res，load:false}）；
}))
}
render（）{
返回(
{this.state.data&&{this.state.data.accounts.length}
)
}

如果此行不起作用{this.state.data&&{this.state.data.accounts.length}请改为执行以下操作：

{this.state.data&&this.state.data.accounts&&{this.state.data.accounts.length}

如果您使用lodash，您可以导入以下内容：

import get from 'lodash.get';

...

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

从“lodash.get”导入get；
...
{get（this.state，'data.accounts.length'，null）}
未定义的原因是不正确使用async/await。

您应该这样使用它
您的第一次渲染甚至在从promise加载数据之前就开始了。您可以通过检查
此.state.data
是否存在来保护它。
    async componentDidMount() {
        const response = await fetch(`https://api.coinmarketcap.com/v1/ticker/?limit=10`);
        const json = await response.json();
        this.setState({ data: json });
    }