代码之家 › 专栏 › 技术社区 › Mohit

React useContext():当试图在useContext(()api中执行函数以获取数据时,对象作为React子对象无效

react-context object arrays reactjs

0

Mohit · 技术社区 · 10 月前

我想通过在 useContext() api,基本上这个api给了我添加到购物车中的项目数,我只需要这个数字,我在cart.js组件中使用它。

现在,我想在添加项目时运行此上下文 ProductDetails.js 当我删除组件中的项目时 Cart.js 显然,无需重新加载应用程序。

这是我的 useCartItems() 自定义挂钩:-

import { useEffect, useState } from "react";
import { getCartDetail } from "../components/services/_getMethod";

export default function useCartItems() {
    const dealer_id = sessionStorage.getItem("dealer_id");
    const [items, setItems] = useState([]);

    const fetchCartItems = () => {
        // getCartDetail() is common api function
        getCartDetail("api/ProductDetails/GetCountProductList", dealer_id).then(
            (data) => {
                setItems(data.data.length);
            }
        );
    }

    useEffect(() => {
        fetchCartItems();
    }, [])

    return { items, fetchCartItems };
}

这是我的 CartContext.js :-

import { createContext, useEffect, useState } from "react";
import useCartItems from "../custom-hook/useCartItems";

export const CartItemContext = createContext();

export const CartItemProvider = ({ children }) => {

    const { items, fetchCartItems } = useCartItems();

    return <CartItemContext.Provider value={{ items, fetchCartItems }}>
        {children}
    </CartItemContext.Provider>
}

这是我的 Cart.js 在deleteCartItem()函数中,我正在执行我的自定义钩子fetchCartItems():-

export default function Cart(){
    const { fetchCartItems } = useContext(CartItemContext);

    const deleteCartItem = async (itemId) => {
    try {
      // common delete function
      deleteCart("api/ProductDetails/delete_cart", itemId).then((data) => {
        fetchCartItems();
      });
    } catch (err) {
      console.error(err);
    }
  };


    //Rest JSX
   return <button onClick={() => deleteCartItem(itemId)}>remove</button>
}

这段代码同样适用于 产品详情.js 组件,用于在购物车中添加商品。

因此,在我看来,所有这些都应该正常工作,但当页面加载时,我遇到了这个错误:-

1 回复 | 直到 10 月前

1

Build Though 10 月前

import { useEffect, useState } from "react";
import { getCartDetail } from "../components/services/_getMethod";

export default function useCartItems() {
    const dealer_id = sessionStorage.getItem("dealer_id");
    const [items, setItems] = useState([]);

    const fetchCartItems = () => {
        // getCartDetail() is common api function
        getCartDetail("api/ProductDetails/GetCountProductList", dealer_id).then(
            (data) => {
               // it stores length setItems(data.data.length);
                setItems(data.data);
            }
        );
    }

    useEffect(() => {
        fetchCartItems();
    }, [])

    return { items, fetchCartItems };
}

为什么u在项目中存储长度?setItems将一个数字存储到items状态变量中,我想你在某个地方试图映射这个数字或接受这个值,希望它是数组。