TypeError：无法读取未定义的属性“映射”“反应答案

【问题标题】：TypeError: Cannot read property 'map' of undefined" ReactTypeError：无法读取未定义的属性“映射”“反应
【发布时间】：2021-06-20 00:00:06
【问题描述】：

我是 React 新手，我一直在学习 React。并且下面的代码出现了诸如“TypeError：无法读取未定义的属性'map'”之类的问题；谁能告诉发生了什么？非常感谢！

import React, { Component } from 'react'

const ListGroup = props => {
    const {items,textProperty,valueProperty} = props;
    return ( 
      <ul className="list-group">
          {items.map(item =>(
         <li key={item[valueProperty]} className="list-group-item">
             {item[textProperty]}
         </li>
          ))}
          
      </ul>
     );
}
 
export default ListGroup;

【问题讨论】：

这意味着items对象还没有被设置（未定义的引用）。

标签： reactjs

【解决方案1】：

您似乎没有将items 属性传递给ListGroup：

<ListGroup items=[] />

或者，您可以为项目分配默认值：

const {items = [],textProperty,valueProperty} = props;

或者使用猫王运算符：

items?.map(item => {})

【讨论】：

嗨 Pavlo，非常感谢您的回答，我已将另一个文件中的项目传递为： ; state = {电影：[]，流派：[]，pageSize：4，currentPage：1}；但不工作......
@YellowClock 这看起来不对，你可能想要：items={this.state.genres}
你找到了我巴甫洛！！非常感谢！！

【解决方案2】：

您的 items 对象在开始时未定义。只需添加一个空检查：

const ListGroup = props => {
    const {items,textProperty,valueProperty} = props;
    return ( 
      <ul className="list-group">
          {items && items.map(item =>(
               <li key={item[valueProperty]} className="list-group-item">
                 {item[textProperty]}
               </li>
          ))}
          
      </ul>
     );
}

【讨论】：

非常感谢，我也刚发布关于堆栈溢出的问题..
没问题，如果这有助于您确保接受它作为答案:) 快乐编码
你为什么不接受我之前的回答，这很有效。您可以投票支持其他有用的答案，但您应该接受最早的有效答案。 items && items.map 和 items?.map 做同样的事情，如果 items 不是 falsy，它们会执行 map 函数
嗨 Sinan Yaman，我很抱歉，我没有注意到我不接受你的回答。我喜欢你的分析器，它对我有用。非常感谢，再次抱歉..
非常感谢您的建议和理解！现在我明白发生了什么事......它不会再发生了:) 美好的一天！

【解决方案3】：

您可以使用操作链接，将您的代码更改为：

const ListGroup = props => {
    const {items,textProperty,valueProperty} = props;
    return ( 
      <ul className="list-group">

          { items?.map(item =>(
               <li key={item[valueProperty]} className="list-group-item">
                 {item[textProperty]}
               </li>
          ))}
          
      </ul>
     );
}
```

【讨论】：

非常感谢 Crispen 的帮助！
如果您觉得有帮助，请为答案投票
嗨 Crispen，我已经投票了，但是我收到了“感谢您的反馈！声望低于 15 的人的投票将被记录，但不要更改公开显示的帖子得分。”我不确定它会起作用..