javascript - 在 React 中映射异步数据的最佳方式

Question

我有一个组件，我想在其中映射一组数据，如下所示:

render() {

  return (
    <List>
        {this.props.data.days.map(function(item){
          return (
            <ListItem>Hej</ListItem>
          );
        })}
    </List>
  );
}

props.data 是在父组件中获取的异步数据，并作为状态传递给该组件。这意味着当此组件首次呈现时，this.props.data 未定义，我收到错误消息 Cannot read property 'map' of undefined。处理这个问题的首选方法是什么？我应该在不同的生命周期中还是在构造函数中做一些事情？

我没有使用 Flux 或 Redux。

我试过设置默认的 propTypes，像这样:

class SingleCompetition extends Component {
  static defaultProps = {
    data: { days: [] },
  }

  render() {
    let competition = this.props.data;

    return (
      <List heading="sunday 150 starts">
        {this.props.data.days.map(function(item){
          return (
            <ListItem>Hej</ListItem>
          );
        })}
      </List>
    );
  }
}

但随后出现此错误:无法读取未定义的属性“map”。无法读取 null 的属性“__reactInternalInstance$pnbhyoz0ysdjwgvypz8q9qkt9”

Answer 1

render() {

return (
  <List>
    {this.props.data !== undefined ? this.props.data.days.map(function(item){
      return (
        <ListItem>Hej</ListItem>
        );
      })
   : null}
  </List>
 );
}