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

Answer 1

我正在使用getDefaultProps方法。

在你的情况下，它会像：

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

您可以详细了解这些方法here。

<强>更新：

感谢您的评论，这是我对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

res/drawable-ldpi/
res/drawable-ldpi-v8/
res/drawable-ldpi-v11/
res/drawable-mdpi/
res/drawable-mdpi-v8/
res/drawable-mdpi-v11/
res/drawable-hdpi/
res/drawable-hdpi-v8/
res/drawable-hdpi-v11/
res/drawable-xhdpi/
res/drawable-xhdpi-v8/
res/drawable-xhdpi-v11/
res/drawable-xxhdpi/
res/drawable-xxhdpi-v8/
res/drawable-xxhdpi-v11/
res/layout-land
res/layout-small-port-v4
res/layout-sw600dp-v13
res/layout-w480dp-v13
res/layout-v11
res/layout-port

Answer 3

你可以这样做

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

Answer 4

使用getDefaultProps的dan-cantir方法可能是最顺畅的方法。如果您正在使用ES6课程：

class MyComponent extends Component {
    ...
}

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

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

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

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

4 个答案: