useContext 使用

第一步：创建store文件夹，下面创建 contentext.js

// 代码

import React from 'react';

const CartContext = React.createContext({

    items: [],

    totalAmount: 0,

    totalPrice: 0,

    addItem: () => {

    },

    removeItem: () => {

    },

    clearCart: ()=>{

    }

});

export default CartContext;

第二步：

在app.js中

mport CartContext from "./store/cart-context";

<CartContext.Provider value={{...cartData, addItem, removeItem, clearCart}}>

            <div>

                <FilterMeals onFilter={filterHandler}/>

                <Meals

                    mealsData={mealsData}

                />

                <Cart/>

            </div>

        </CartContext.Provider>

 注意： CartContext.Provider 是最重要的，这个是相当于全局有了这个就可以将content使用了

调用：比如cart.js 文件中使用

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

import CartContext from "../../store/cart-context";

const ctx = useContext(CartContext);

    console.log("ctx", ctx)

   // 添加一个显示详情页的函数

    const toggleDetailsHandler = () => {

        if (ctx.totalAmount === 0) {

            setShowDetails(false);

            return;

        };

        setShowDetails(prevState => !prevState);

    };

    const showCheckoutHandler = () => {

        if (ctx.totalAmount === 0) return;

        setShowCheckout(true);

    };