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

Question

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

请参见下面的代码：

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> 

然后我有一些按钮可以在两个组件之间来回切换。 当我想切换到这个列表时，props 中的本地数据是未定义的，或者我收到错误消息“TypeError: Cannot read property 'map' of undefined”。 希望这就足够了，不知道如何在这里显示完整的代码。

Answer 1

您可以进行空检查，Like 列表可用且列表长度不为零。

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