ReactJS-TypeError：无法读取未定义的属性“名称”，但它是

如何解决ReactJS-TypeError：无法读取未定义的属性“名称”，但它是

我有一个map函数，该函数应该从我创建的列表中获取数据并将其显示给用户，但是每当我尝试这样做时，它都会给我带来输入错误，这是我的map函数：

{product.map((item,idx)=>
            <div key={idx}>
                    <h3 className='productName'>{item[idx].name}</h3>
                    <div className='productimageContainer'>
                        <img src={item[idx].image}></img>
                    </div>
                    <span className='productPrice'><strong>${item[idx].Price}.00</strong></span>
                    <br></br>
                    <Button className='removeProductButton' variant='danger'><MdCancel></MdCancel> Remove</Button>

            </div>)}

这是我将项目附加到数组的代码段：

    const [product,getProduct]= useState([])
const getProducts=()=>
{
    let X = JSON.parse(localStorage.getItem('products'))
    getProduct([...product,X])
}

我收到以下错误：“ TypeError：无法读取未定义的属性'name'”，我尝试手动控制台记录该列表中的每个元素，但绝对不是未定义的，为什么会这样以及如何解决它吗？

解决方法

您可以像这样直接在name上访问item属性：

<h3 className='productName'>{item.name}</h3>

item是列表中正在处理的当前元素。

通过数组映射时，您已经在遍历每个元素，这就是代码中的“ item”字段。它是您要映射的数组中的每个单独项。

现在来看为什么会引发错误：当您通过数组进行映射并且位于特定项目内部时，您尝试执行item [idX] .name，在您的情况下，它试图查找键值为idX的对象，该对象是未定义的，因为它是undefined会引发错误，它无法读取undefined的属性“ name”（您尝试访问）。

解决方案：

只需执行{item.name}即可访问项目对象（您正在进行的特定迭代的对象）的名称。
您还可以从项中分解所需的内容，以使代码看起来清晰。参考：https://dmitripavlutin.com/javascript-object-destructuring/

希望这可以消除您的疑问：）