Question

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

2019-09-19

745

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

Answer 1

我认为你可以做的是

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

AvadaKedavra

2019-09-19

Answer 2

有时可能会发生这种情况，因为在渲染过程中，状态尚未完成，因此它无法获取状态内键的全部属性。在这种情况下，它尚未完成加载 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>
    )
}

如果此行不起作用 {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，您可以导入：

import get from 'lodash.get';

...

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

Answer 3

你得到未定义的原因是 async/await 的使用不正确。 阅读以获取更多信息兄弟

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

你应该这样使用它