这是因为你在你的组件中初始化了peopleList为null，所以map只对数组有效，所以你需要检查peopleList是否真的是一个数组，然后再对它进行map
变更

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

我认为您的问题可能是react在componentDidMount（）之前呈现一次。这是一个问题，因为您调用arr上的map为null。const { peopleList } = this.state;您将人员列表设置为您的当前状态（默认设置为空），state = {peopleList：null};那么你以后会调用这个.renderItems（peopleList）;此时人员列表仍然为空，因此您将获得空错误的“无法读取”属性“map”。我相信类似componentWillMount的内容是您需要的。我建议您查看这篇文章，其中包含React生命周期方法的类似问题。React render() is being called before componentDidMount()

答案很简单：输入的类型不是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>
        );
    }

或者：

• 在进行Map之前，请确保输入必须为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>
             );
           });

{product.size?.map(c=>(

                <FilterSizeOption key={c}>{c}</FilterSizeOption>
                ))}

用if语句 Package return语句对我很有效
变了

return (
  <div>
    <Navbar />
    {countries.map((country, i) => {
      return (
        <div>
          <span key={`${country.name.common}${i}`}>
            {country.name.common}
          </span>
        </div>
      );
    })}
  </div>
);

到这个

if (countries) {
return (
  <div>
    <Navbar />
    {countries.map((country, i) => {
      return (
        <div>
          <span key={`${country.name.common}${i}`}>
            {country.name.common}
          </span>
        </div>
      );
    })}
  </div>
);

}