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

但是然后我得到了这个错误： Cannot read property 'map' of undefined. Cannot read property '__reactInternalInstance$pnbhyoz0ysdjwgvypz8q9qkt9' of null Cannot read property 'map' of undefined. Cannot read property '__reactInternalInstance$pnbhyoz0ysdjwgvypz8q9qkt9' of null

Answer 1

我正在使用getDefaultProps方法。

在您的情况下，它将像：

 getDefaultProps: function () {
        return { 
            data: {
                days: []
            }
        };
  },

您可以在此处阅读有关这些方法的更多信息。

更新 ：

感谢您的评论，这是我对ES6的更新答案。 如果您使用的是ES6，我想它应该像这样：

class SingleCompetition extends React.Component {

  static defaultProps = {
    data: { days: ['monday', 'tuesday'] },
  }

  render() {
    return (
        <ul>
          {this.props.data.days.map(function(day){
              return <li>{day}</li>;
          })}
        </ul>
    );
}

React.render(<SingleCompetition />, document.body);

Answer 2

render() {

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

Answer 3

你可以这样做

{this.props.data !== undefined? this.props.data.map(){}: null}

Answer 4

dan-cantir使用getDefaultProps的方法可能是最平滑的方法。 如果您使用的是ES6类：

class MyComponent extends Component {
    ...
}

MyComponent.defaultProps = {
    data: {
        days: []
    }
}

或者，使用无状态功能组件：

function MyComponent({ data = { days: [] } }) {
    ...
}