Question

请问为什么我会收到此类型错误：无法读取 react.js 未定义的属性“地图”？

import React from 'react'
import './ListItems.css'

function ListItems(props) {
    const items = props.items;
    const ListItems = items.map (item =>
    {
        return <div className = "list" key = "item.key">
            <p>{item.text} </p>

        </div>
    })
    return (
    <div> {ListItems} </div>
    )
}

export default ListItems

Answer 1

items 数组未定义，这意味着您要么没有传递 prop，要么传递了未定义的值，要么打错了字
key 属性是可变的，所以你必须使用 key={item.key}

你还可以让你的代码更简洁：

您可以通过移除花括号来去掉 return 关键字：

items.map(item => (
   <div>
   </div>
))

我建议你解构函数参数中的 props :

const ListItems = ({items}) => {
    // function code
}

Answer 2

没有评论能够解决我的问题。我是这里的全面学习者。如果您将解释分解到我可以理解的水平，我将不胜感激。谢谢

Answer 3

您可以检查 props.items 是否未定义。如果未定义，则不执行任何操作，如果已定义，则执行所需的任务。

import React from "react";
import "./ListItems.css";

function ListItems(props) {
  let listItems = null;
  const { items } = props;

  if (typeof items !== "undefined"){   
    listItems = items.map(item => {
      return (
        <div className="list" key={item.key}>
          <p>{item.text} </p>
        </div>
      );
    });
  }

  return <div> {listItems} </div>;
}

export default ListItems;

类型错误：无法读取 react.js 未定义的属性“map”

3 个答案: