React看不到映射的道具

问题描述 投票:0回答:1

我在浏览器中收到此消息:TypeError:data.map不是函数

这是我的代码:

class DropdownMaker extends Component {
  render() {
    const { data } = this.props;
    const eventFilters = data.map((e) => (
      <DropdownMenu
        id={e.id}
        name={e.name}
        values={e.values}
      />
    ));
    return (
      { eventFilters }
    );
  }
}

DropdownMaker.propTypes = {
  data: PropTypes.array.isRequired,
};

我正在从另一个组件传递数组作为prop。我做错了什么?预先谢谢!

javascript reactjs
1个回答
0
投票

检查数据是否真正通过map之前填充。

class DropdownMaker extends Component {
  render() {
    const { data } = this.props;
    const eventFilters = (data && data.length > 0) && data.map((e) => (
      <DropdownMenu
        id={e.id}
        name={e.name}
        values={e.values}
        key={e.id} //<-- don't forget to add a unique key prop while use loop
      />
    ));
    return (
      { eventFilters }
    );
  }
}

DropdownMaker.propTypes = {
  data: PropTypes.array.isRequired,
};

如果无法使用,请随时发表评论。

© www.soinside.com 2019 - 2024. All rights reserved.