Uncaught TypeError: Cannot read properties of undefined (reading 'id')

Question

我得到 undefined 因为来自 cartitems 的 item 不是 undefined，我该如何解决它？

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

问题

在您的初始渲染中，您正试图访问一个不存在的属性。换句话说，在您的初始渲染中，您的 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 2

问题是：return .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
  })

Answer 3

这可以解决您的问题：

1- 你没有return地图上的任何东西

2- 最好在 cartitems 的设置状态下使用函数类型

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

    }
  }

Uncaught TypeError: Cannot read properties of undefined (reading 'id')

Uncaught TypeError: Cannot read properties of undefined (reading 'id')

javascript

reactjs

react-hooks

问题

解决方案