未捕獲的類型錯誤：無法讀取未定義的屬性（讀取“id”）

Question

我未定義，因為cartitems中的item未定義，我該如何解決？

1.

 import React,{useState} from 'react' import {products} from './data' function app() { const [cartitems, setCartitems] = useState([]) const onAddToCart = (product)=>{ const exist = cartitems.find((item)=> { return product.id == item.id }) if(exist){ setCartitems(cartitems.map((item)=>{ item.id == product.id ? {...exist, qnty: exist.qnty + 1}: item })) } else{ setCartitems([...cartitems, {...product, qnty: 1}]) } } return ( <div> {products.map((product)=>( <div key={product.id}> <img src={product.image} style= {{width:"200px"}}/> <p>{product.name}</p> <button onClick={() => onAddToCart(product)}>Add To Cart</button> </div> ))} </div> ) } export default app

 export const products = [ { id: '1', name: 'MacBook', price: 1400, image: 'https://picsum.photos/id/180/2400/1600', }, { id: '2', name: 'Old Car', price: 2400, image: 'https://picsum.photos/id/111/4400/2656', }, { id: '3', name: 'W Shoes', price: 1000, image: 'https://picsum.photos/id/21/3008/2008', }, ]

Answer 1

這可以解決您的問題：

1-你沒有從地圖返回任何東西

2-最好在設置狀態下使用函數類型來處理caritems

function app() {
  const [cartitems, setCartitems] = useState([])

  const onAddToCart = (product)=>{

    const exist = cartitems.find((item)=> {
        return product.id == item.id
    })

    if(exist){
      setCartitems(cartitems.map((item)=>
        item.id == product.id ? ({...exist, qnty: exist.qnty + 1}): item
      ))
    }
    else{
      setCartitems(s=>[...s, {...product, qnty: 1}])

    }
  }

Answer 2

問題

在您的初始渲染中，您試圖訪問一個不存在的屬性。 換句話說，在您的初始渲染中，您的products是一個空數組

解決方案

使用短路

      {products &&
            products.map((product) => (
              <div key={product.id}>
                <img src={product.image} style={{ width: "200px" }} />
                <p>{product.name}</p>
                <button onClick={() => onAddToCart(product)}>
                  Add To Cart
                </button>
              </div>
            ))}

Answer 3

問題是：您沒有在.map中返回任何內容。 這就是你得到undefined的原因。

setCartitems(cartitems.map((item)=>{
   item.id == product.id ? {...exist, qnty: exist.qnty + 1}: item
}))

只需刪除{和} ：

setCartitems(cartitems.map((item)=>
   item.id == product.id ? {...exist, qnty: exist.qnty + 1}: item
))

或顯式添加return ：

cartitems.map(item => {
    if (item.id == product.id) {
      return { ...exist, qnty: exist.qnty + 1 }
    }
    
    return item
  })