如何在 React 中将商品添加到购物车

Question

我用 React 制作了一个应用程序，它在屏幕上显示 9 个产品。我制作了一个按钮将它们添加到购物车，我想让该应用程序在功能上仅用于演示目的。我使用了钩子，但我不知道我做了什么 wrong.Here 是我收到的错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at Products (Products.js:8:1)

react-dom.development.js:18523 The above error occurred in the <Products> component:

    at Products (http://localhost:3000/main.f01d7322f0afd7419d5f.hot-update.js:30:5)
    at Routes (http://localhost:3000/static/js/bundle.js:40456:5)
    at Router (http://localhost:3000/static/js/bundle.js:40389:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:39198:5)
    at App (http://localhost:3000/static/js/bundle.js:44:84)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

这是完整的项目：https://github.com/burNN11/Project

import productItems from './data/Data'

const Products = ({handleAddProduct, productItems}) => {
  console.log(productItems)
  return (
    <div className='produse'>
      {productItems.map((item)=> (
        <div className='produs' key={item.id}>
          <div>
            <img className='imagine-produs'
              src={item.image} 
              alt = {item.name}

Answer 1

编辑

我克隆了你的项目，应用了我的修复并让它开始工作。有问题的代码在 App.js 中，在 handleAddProduct() 处理程序中：

const handleAddProduct = product => {
    const ProductExist = cartItems.find(item => item.id === product.id);
    if (ProductExist) {
      setCartItems(
        cartItems.map(item =>
          item.id === product.id
            ? { ...ProductExist, quantity: ProductExist.quantity + 1 }
            : item
        )
      );
    } else {
      setCartItems([...cartItems, { 
        ...product, 
        quantity: ProductExist.quantity + 1  // <-- error is here
      }]);
    }
  };

在else块中，ProductExist是undefined，因为进入else块的唯一方法是undefined .但是你尝试使用ProductExist.quantity + 1。它应该只是 1，像这样：

const handleAddProduct = product => {
    const ProductExist = cartItems.find(item => item.id === product.id);
    if (ProductExist) {
      setCartItems(
        cartItems.map(item =>
          item.id === product.id
            ? { ...ProductExist, quantity: ProductExist.quantity + 1 }
            : item
        )
      );
    } else {
      setCartItems([...cartItems, { 
        ...product, 
        quantity: 1  // <-- Change here
      }]);
    }
  };

通过此更改，购物车功能可以在我的本地主机上运行。没有 UI 更新来显示购物车中的新商品，但我检查了控制台，商品添加正确，没有错误。

希望对您有所帮助。

原回答

在 components/Products.js 中，您将 <Products/> 组件定义为：

import productItems from './data/Data'

const Products = ({handleAddProduct, productItems}) => {
  console.log(productItems)
  ...

您通过将其定义为道具来覆盖 productItems 导入。这是因为 JavaScript 处理 scope 的方式。函数参数中的定义优先。

您应该更改上面的行以删除道具，如下所示：

import productItems from './data/Data'

const Products = ({handleAddProduct}) => {
  console.log(productItems)
  ...

您没有在 App.js 中传递 productItems 道具，因此当您尝试映射到它时道具是 undefined。

如何在 React 中将商品添加到购物车

How to add items to a cart in React

reactjs

react-hooks

编辑

原回答