问题

1. 您有多个AppProvider组件，每个组件都为其包装的子级提供不同的上下文。
2. 初始AppContext形状与实际作为上下文值传递的形状不匹配。
3. 的cartItems状态不被保持为一个数组。
4. 其他各种问题和模式

解决方案

1. 删除所有无关的AppProvider提供程序组件，仅使用一个将整个应用程序包装在_app.js.

   import { AppProvider } from "../components/context/AppContext";
   
   export default class TailwindApp extends App {
     render() {
       const { Component, pageProps } = this.props;
       return (
         <AppProvider>
           <Component {...pageProps} />
         </AppProvider>
       );
     }
   }
   

2. 修复上下文以具有与提供的值匹配的初始值。修复状态更新器以正确管理cartItems阵列。useEffect当cartItems数组状态更新时，使用钩子计算派生的总项目计数状态。正确添加和更新项目/产品数量，并在数量达到 0 时删除项目。

   import React, { useState, useEffect } from "react";
   
   export const AppContext = React.createContext({
     cart: 0,
     cartItems: [],
     setCart: () => {},
     addToCart: () => {},
     removeFromCart: () => {}
   });
   
   export const AppProvider = (props) => {
     const [cart, setCart] = useState(0);
   
     const [cartItems, setCartItems] = useState([]);
   
     useEffect(() => {
       setCart(cartItems.reduce((count, { quantity }) => count + quantity, 0));
     }, [cartItems]);
   
     const addToCart = (product) => {
       setCartItems((items) => {
         if (items.find(({ id }) => id === product.id)) {
           return items.map((item) =>
             item.id === product.id
               ? {
                   ...item,
                   quantity: item.quantity + 1
                 }
               : item
           );
         } else {
           return [
             ...items,
             {
               ...product,
               quantity: 1
             }
           ];
         }
       });
     };
   
     const removeFromCart = (product) => {
       setCartItems((items) => {
         const foundItem = items.find(({ id }) => id === product.id);
         if (foundItem?.quantity > 1) {
           return items.map((item) =>
             item.id === product.id
               ? {
                   ...item,
                   quantity: item.quantity - 1
                 }
               : item
           );
         } else {
           return items.filter(({ id }) => id !== product.id);
         }
       });
     };
   
     return (
       <AppContext.Provider value={{ cart, addToCart, removeFromCart, cartItems }}>
         {props.children}
       </AppContext.Provider>
     );
   };
   

3. 在Products.js删除所有本地项目计数状态时，可以从上下文中的状态访问数量。在项目计数上有条件地呈现“添加项目”和递增/递减按钮。

   import Link from "next/link";
   import { useContext } from "react";
   import { AppContext } from "./context/AppContext";
   
   const Product = (props) => {
     const { product } = props;
     const contextData = useContext(AppContext);
   
     const count =
       contextData.cartItems.find(({ id }) => id === product.id)?.quantity ?? 0;
   
     const addToCart = (product) => () => {
       contextData.addToCart(product);
     };
     const removeFromCart = (product) => () => {
       contextData.removeFromCart(product);
     };
   
     return (
       ...
   
           {count ? (
             ...
                 {count}
             ...
           ) : (
             ...
                 <span className="label">ADD</span>
             ...
           )}
         </div>
       </div>
     );
   };
   

4. 在Cart.js你可以导入和消耗来呈现并显示车项目的上下文。

   import { useContext } from "react";
   import { AppContext } from "../components/context/AppContext";
   
   const Cart = () => {
     const { cart, cartItems } = useContext(AppContext);
   
     return (
       <div>
         <h1> Cart Page </h1>
         <h2>Total Item Count: {cart}</h2>
         <p>
           <ul>
             {cartItems.map(({ id, name, quantity }) => (
               <li key={id}>
                 {name}: {quantity}
               </li>
             ))}
           </ul>
         </p>
       </div>
     );
   };
   

注意：请注意，id您的products数组中的所有项目/产品都添加了一个属性，以使匹配/识别它们变得更加容易。

演示

您需要将您的 to 移动AppProvider到_app.js并将其从两者中删除index.js，cart.js然后两个页面都将能够访问相同的上下文。

你_app.js应该看起来像这样

import React from "react";
import App from "next/app";
import { AppProvider } from "../components/context/AppContext";

export default class TailwindApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <AppProvider>
        <Component {...pageProps} />
      </AppProvider>
    );
  }
}