我有一个 map 函数，它应该从我创建的列表中获取数据并将其显示给用户，但是每当我尝试这样做时，它都会给我一个 typeerror，这是我的 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’”，我已尝试手动控制台记录列表的每个元素，但它肯定不是未定义的，为什么会发生这种情况，我该如何修复它？