在组件中使用自定义钩子的状态

Question

我正在开发一个购物车功能的迷你项目，我正在创建一个自定义挂钩

useCart

这将包含我的购物车功能（添加到购物车等），以及用于存储购物车对象的状态 [cart, setCart]。

我的自定义挂钩位于 /Hook 文件夹中，我的产品位于 /Component/Product 文件夹中

我想在我的Product.js 组件中使用此状态，但是，当我尝试使用它时，它告诉我购物车未定义（我尝试传递一个简单的字符串并且它有效，所以我认为这不是相对路径问题)

我是初学者，所以我想知道，我的架构有问题吗？如何将此状态传递给Product.js 并更新它？

我阅读了有关上下文 API 的信息，但我不确定语法以及它是否适合这里...

多谢你们。

这里是Product.js 和useCart.js：

Product.js

useCart.js

产品 ：

import React, {useState, useEffect} from 'react'
import useCart from '../../Hooks/useCart';
import Data from '../../local-json/products';

export default function Product() {

  const [products, setProducts] = useState();
  const {cart, setCart, addItem, removeItem} = useCart();

  useEffect(()=>{
    setProducts(Data);
  }, []);

  console.log(addItem);

  return (
    <>
      <article className="product-single">
        <h1>Fire sale !</h1>
        {
          Data.map(el =>{
            return(
              <h2>{el.productName}</h2>
            )
          })
        }

        <button>Add</button>
      </article>
    </>
  )
}

使用购物车：

    import React, {useState, useEffect, useContext} from 'react'

export default function useCart() {

    const [cart, setCart] = useState(); /* Here we store the product object */



    const addItem = (productObj) =>{
      setCart([...cart, productObj]);
    } /* Add to cart function */

    const removeItem = (productObj) => {
      setCart(cart.filter(
        item => {
          return item !== productObj;
        }
      ))
    } /* Remove from cart function */

    const quantitiyAdd = () => {

    } /* Add one item function */

    const quantityRemove = () => {

    } /* Remove one item function */
    
    return {cart, setCart, addItem, removeItem};
}

Answer 1

尝试为您的 cart 数组定义一个默认值，这应该可以防止 undefined 错误：

const [cart, setCart] = useState([]);

无论如何，如果您想通过您的应用程序声明并提供全局状态，您应该查看Context API。

Answer 2

您的挂钩结构似乎没问题，但您设置使用购物车数据的方式可能存在问题。

    const [cart, setCart] = useState([]); /* Cart is an empty array */


 const addItem = (productObj) =>{
//Do not add cart directly to setCart, you may get stale data. 
//prevState is your current status before the update
      setCart((prevState) => [...prevState, productObj]);
    } /* Add to cart function */

Answer 3

确实是因为购物车没有价值，我觉得很愚蠢哈哈，但现在可以了。谢谢 ！

我将深入研究上下文 API 可能会有用，谢谢你们摇滚！