javascript - 在 React JS 中处理来自异步请求的数据

Question

我有一个类组件，我在其中从其本地 Prop 中的异步请求获取数据。该数据采用数组形式，我循环遍历并显示一些列表元素。第一次渲染组件时，我收到空数组，然后从服务器收到填充数组。下次组件渲染时，我再次收到空数组，这意味着本地 Prop 中的数据现在为空，这是有道理的。任何解释如何处理这个问题，所以我已经填充了数组。

参见下面的代码:

const {List} = this.props; //data in local props of a component
<ListGroup>
    {
        List.map((f, index) => {
            return (
                <ListGroup.Item 
                    action
                    href="" 
                    key={f.get('ID')}
                    value = {f.get('ID')}
                    onClick={this.handleClick}
                >
                    {f.get('NAME')}
                </ListGroup.Item>
            )
        })
    }
</ListGroup> 

然后我有一些按钮可以在两个组件之间来回切换。当我想切换到此列表时， Prop 中的本地数据未定义，或者出现错误“TypeError:无法读取未定义的属性‘map’”。希望这足够了，不知道如何在这里显示完整的代码。

Answer 1

可以做空检查，点赞列表可用且列表长度不为零。

 <ListGroup>
                  {List && List.length && List.map((f, index) => {
                      return (<ListGroup.Item 
                              action href="" 
                              key={f.get('ID')}
                              value = {f.get('ID')}
                              onClick={this.handleClick}
                              >
                              {f.get('NAME')}
                              </ListGroup.Item>
                              )
                  })}
                  </ListGroup>