Javascript ReactJS-TypeError:无法读取属性'；名称'；未定义的，但它是

我有一个映射函数，它应该从我创建的列表中获取数据并向用户显示，但每当我尝试这样做时，它都会给我一个TypeError，下面是我的映射函数：

{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>)}

---

我遇到以下错误：“TypeError:无法读取未定义的属性'name'，我尝试手动控制台记录列表中的每个元素，但它肯定不是未定义的，为什么会发生这种情况以及如何修复它？

您可以直接在

项上访问
名称
属性，如下所示：

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

{item.name}

项目
是列表中正在处理的当前元素。
您可以直接访问
项目
上的
名称
属性，如下所示：

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

{item.name}

item
是列表中正在处理的当前元素。
当您通过数组映射时，您已经通过了每个元素，这就是代码中的“item”字段。您映射的是数组中的每个单独项

现在来看看为什么它会抛出错误：
当您通过数组进行映射，并且您位于特定项中，并且您尝试执行项[idX].name时，它会尝试在您的案例中查找键为idX且未定义的对象，并且由于该对象未定义，因此会引发错误，即它无法读取未定义的属性“name”（您正在尝试访问该属性）

解决方案：


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

希望这能消除您的疑虑：）
当您通过数组进行映射时，您已经通过了每个元素，这就是代码中的“项”字段。您映射的是数组中的每个单独项

现在来看看为什么它会抛出错误：
当您通过数组进行映射，并且您位于特定项中，并且您尝试执行项[idX].name时，它会尝试在您的案例中查找键为idX且未定义的对象，并且由于该对象未定义，因此会引发错误，即它无法读取未定义的属性“name”（您正在尝试访问该属性）

解决方案：


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

希望这能消除你的疑虑：）
我试过这么做，但每次我这么做都不会真正显示任何东西，除非我把它编入索引，否则答案是正确的。检查你的
产品
很可能你的
产品
列表不是你想象的那样。做
item[idx].name
是行不通的。我会调查一下，是的，显然产品列表是空的，至少对我来说有些模糊，即使在我附加了这些值之后，原因也是空的，嗯。谢谢你的合作，尽管我试着这么做了，但每当我做的时候，它并没有真正显示任何东西，除非我把它编入索引，尽管答案是正确的。检查你的
产品
很可能你的
产品
列表不是你想象的那样。做
item[idx].name
是行不通的。我会调查一下，是的，显然产品列表是空的，至少对我来说有些模糊，即使在我附加了这些值之后，原因也是空的，嗯。谢谢你的合作