Question

这是我的第一个问题，我是一名新手开发人员，而且我在第一个Web应用程序上工作了一个星期。我被困住了，因为我试图做一个简单的移动电子商务，我已经制作了8张卡片，并且我放置了一个加号图标，该图标需要在点击该购物车时将其添加到购物车中，并且还必须翻转并成为购物车图标。

我想我无法访问map方法内部的内容？！我得到错误：TypeError：无法读取未定义的属性“ id”。问题在于某种方法内，我无法提出任何其他解决方案。有什么建议吗？你能帮我吗？谢谢。

function Mobile() {
const [hovered, setHovered] = useState(false)
const [cartItems, setCartItems] = useState([])

const mobiles = data.map(mobile => (
    <div className='card' key={mobile.id}
         onMouseEnter = {() => setHovered(true)}
         onMouseLeave = {() => setHovered(false)}

    >
            {cartIcon()}
            <img src= {mobile.img}  alt='Mobile phones' className='mobile-img' />
            <h3 className='mobile-title'>{mobile.title}</h3>
            <p className='mobile-info'>{mobile.info}</p>
            <p className='mobile-price'>€ {mobile.price}</p>
    </div>

))

function addToCart(newItem) {
setCartItems(prevItems => [...prevItems, newItem])

}

function cartIcon() {
const alreadyInCart = cartItems.some(item => item ===  item.id)
if(alreadyInCart) {
    return <i className="ri-shopping-cart-fill cart"></i>
} else if(hovered) {
    return <i className="ri-add-circle-line cart" onClick = {() => addToCart()}></i>
}

}

Answer 1

您要添加到购物车的函数声明：function addToCart(newItem)希望该项目作为参数传递。但是，您没有传递任何内容：

<i className="ri-add-circle-line cart" onClick = {() => addToCart()}></i>

因此，当它尝试将商品添加到此处的购物车时：

setCartItems(prevItems => [...prevItems, newItem])

newItem未定义。

然后，您尝试访问id的属性undefined和...错误。

cartItems.some(item => item ===  item.id) // <- item is not an object

输入您要添加的item，它将解决您的问题。您将必须将其添加到cartIcon调用及其定义中，然后再将其传递到addToCart。

最终结果将包括以下内容：

{cartIcon(mobile)} // Pass the item

...

function cartIcon(item) { // Expect the item

...

// Add the item
return <i className="ri-add-circle-line cart" onClick = {() => addToCart(item)}></i>

Answer 2

您需要将项目传递给cartIcon函数。该错误是因为您的函数无权访问任何项目。我假设它是移动的？在您的地图中通过移动

{cartIcon(mobile)}

在购物车图标功能中，创建一个名为item的参数

function cartIcon(item) {
const alreadyInCart = cartItems.some(item => item ===  item.id)
if(alreadyInCart) {
    return <i className="ri-shopping-cart-fill cart"></i>
} else if(hovered) {
    return <i className="ri-add-circle-line cart" onClick = {() => addToCart()}></i>
}

我看不到所有代码，但这应该可以解决您的错误。

反应TypeError：无法读取未定义的属性“ id”

2 个答案: