TypeError：无法读取null的属性“ map”

Question

我不明白为什么... 这是git https://github.com/Dronrom/React-test

Answer 1

那是因为您在组件中将peopleList初始化为null。因此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>
                );
            });
         }
      }

Answer 2

我认为您的问题可能是在componentDidMount（）之前进行一次反应渲染。这是一个问题，因为您在arr上的调用映射为null。 const {peopleList} = this.state;您将人员列表设置为当前状态，默认设置为null，state = {peopleList：null};然后您稍后调用this.renderItems（peopleList）;此刻哪些人列表仍然为空，所以您将获得无法读取属性'map'的错误。 我相信像componentWillMount这样的东西是您需要的。我建议您看一下这篇类似反应生命周期方法的文章。 React render() is being called before componentDidMount()

Answer 3

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

如何修复：

• 在致电array之前，请确保输入的内容必须为renderItems()。

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