TypeError：无法读取 null 的属性“地图”答案

【问题标题】：TypeError: Cannot read property 'map' of nullTypeError：无法读取 null 的属性“地图”
【发布时间】：2019-02-09 18:24:54
【问题描述】：

我不明白为什么...这里是 GitHub 存储库：https://github.com/Dronrom/React-test

【问题讨论】：

欢迎来到 StackOverflow！请提供minimal reproducible example
您将 arr 作为 null 传递给 renderItems 函数，
谢谢，我知道了(^-^)

标签： javascript reactjs

【解决方案1】：

那是因为您在组件中将 peopleList 初始化为 null。因此 map 仅适用于数组，因此您需要在对其进行 map 之前检查 peopleList 是否真的是一个数组

改变

   renderItems(arr) {
    return arr.map(({id, name}) => {
        return (
            <li className="list-group-item"
                key={id}
                onClick={() => this.props.onItemSelected(id)}>
                 {name}
            </li>
        );
    });
}

到

  renderItems(arr) {
      if(arr){
            return arr.map(({id, name}) => {
                 return (
                     <li className="list-group-item"
                key={id}
                onClick={() => this.props.onItemSelected(id)}>
                        {name}
                    </li>
                );
            });
         }
      }

【讨论】：

【解决方案2】：

我认为您的问题可能是 react 在 componentDidMount() 之前渲染一次。这是一个问题，因为您在 arr 上的调用映射为空。常量 { peopleList } = this.state;您将人员列表设置为您将默认设置为 null 的当前状态，state = {peopleList: null};然后你稍后调用 this.renderItems(peopleList);哪个人员列表此时仍为空，因此您收到无法读取空属性“地图”错误。我相信像 componentWillMount 这样的东西是你需要的。我建议查看这篇文章，它有类似的反应生命周期方法问题。 React render() is being called before componentDidMount()

【讨论】：

【解决方案3】：

答案很简单：输入的类型不是array 类型，可能是null 或undefined。所以它没有.map功能。

如何解决：

在调用renderItems()之前，请确保您的输入必须是array。

    render(){
        const { peopleList } = this.state;


        const items = (peopleList && peopleList.length) ? this.renderItems(peopleList) : null;

        return(
            <ul className="item-list list-group">
                {items}
            </ul>
        );
    }

或者：

在进行映射之前，请确保您的输入必须是 array 类型：


       renderItems(arr) {
          return !arr ? null : arr.map(({id, name}) => {
            return (
                 <li className="list-group-item"
                     key={id}
                     onClick={() => this.props.onItemSelected(id)}>
                      {name}
                 </li>
             );
           });

【讨论】：

感谢您的回复）））