TypeError：无法读取 react.js 未定义的属性“地图”答案

【问题标题】：TypeError: Cannot read property 'map' of undefined of react.jsTypeError：无法读取 react.js 未定义的属性“地图”
【发布时间】：2021-06-13 10:34:55
【问题描述】：

请问为什么我会收到这个 TypeError: Cannot read property 'map' of undefined of 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

【问题讨论】：

@MajidMohammadi 它不为空。 OP 没有将items 作为道具传递，这就是为什么它说无法读取未定义的属性“地图”。 null 和 undefined 在 JS 中是两个不同的东西。
定义一个叫做ListItems的东西inside of一个叫做ListItems的东西可能也不是最好的主意......
Aniket Agawal，谢谢，项目是否应该是一个数组？
您是否将item 道具传递给您的孩子？你能展示你的父组件吗？
如果你也分享props.items值会更有帮助

标签： reactjs

【解决方案1】：

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

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

您可以通过删除花括号来摆脱 return 关键字：

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

我建议你解构函数参数本身的props：

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

【讨论】：

1.可以有空格。尝试在控制台上运行。此外，通过删除返回，错误将无法修复。它是更简洁的代码，但不能解决 OP 问题。
我已经写了第三点这就是原因，我明白你的意思，我会把它移到顶部
@TusharShahi 啊，是的，我对空间不好，认为这是一个错误

【解决方案2】：

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

【讨论】：

你的 'props.items' 是空的，所以你应该检查一下。 const listItems = (props.items || [ ]).map( item => {});