Javascript 在React中映射异步数据的最佳方法

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

render() {

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

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

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

但是我得到了这个错误：

无法读取未定义的属性“map”。无法读取null的属性“\uu reactInternalInstance$pnbhyoz0ysdjwgvypz8q9qkt9”

您可以执行此操作

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

---

我正在使用

getDefaultProps

方法

在您的情况下，它将类似于：

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

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

更新：

谢谢你的评论，这是我对ES6的最新回答。如果您使用的是ES6，我想应该是这样的：

render() {

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

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

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

类singlecomponent.Component{
静态defaultProps={
数据：{天：['星期一'，'星期二]}，
}
render（）{
返回(

{this.props.data.days.map（函数（day））{
返回
{day}
；
})}

);
}
React.render（，document.body）；

render（）{
返回(
{this.props.data！==未定义？this.props.data.days.map（函数（项）{
返回(
嘿
);
})
：null}
);
}

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

class MyComponent extends Component {
    ...
}

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

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

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

---

或者在加载数据时将

null

替换为

Busy loading

或任何您想向用户显示的内容。如果数据作为状态从父组件传递，则效果最佳，因为在父组件中设置默认状态似乎会覆盖默认属性。在es6I中，这些方法不推荐使用，但我实际尝试了这一点，但遇到了一个错误w正是这样写的。我已经更新了我的问题it@DanCantir你看到我的评论了吗？