Question

我是 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;

Answer 1

您似乎没有将 items 道具传递给 ListGroup：

<ListGroup items=[] />

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

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

或者使用elvis操作符：

items?.map(item => {})

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

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

类型错误：无法读取未定义的属性“地图”反应

3 个答案: