Javascript 渲染不是一个函数

我第一次尝试使用上下文并发现这个问题

我在App.js文件中使用了provider（即层次结构的顶部），以便所有子组件都可以使用它

这是我的上下文文件。

import React from 'react';

const CartContext = React.createContext({
      items:[],
      totalAmount:0,
      addItem: (item) => {},
      removeItem: (id) => {}
});

export default CartContext;

这是我的app.js

import Cart from "./Components/Cart/Cart";
import Header from "./Components/Layout/Header";
import Meals from "./Components/Meals/Meals";
import CartProvider from "./Store/CartProvider";
function App() {

  const [cartVisible,setCartVisible] = useState(false);

  const showCartHandler=()=>{
    setCartVisible(true);
  };

  const hideCartHandler =()=>{
    setCartVisible(false);
  };

  return (
    <CartProvider>
    {cartVisible && <Cart onClose={hideCartHandler} />}
      <Header onCartVisible={showCartHandler}/>
      <main>
        <Meals/>
      </main>
    </CartProvider>
  );
}

export default App;

从“/Components/Cart/Cart”导入购物车；
从“/Components/Layout/Header”导入标题；
从“/组件/膳食/膳食”导入膳食；
从“/Store/CartProvider”导入CartProvider；
函数App（）{
const[cartVisible，setCartVisible]=useState（false）；
常量showCartHandler=（）=>{
setCartVisible（真）；
};
恒量hideCartHandler=（）=>{
设置为可见（假）；
};
返回(
{cartVisible&&}
);
}
导出默认应用程序；

这是我的provider.js文件

import { useReducer } from "react";
import CartContext from "./Cart-Context";

const defaultCartState={
      items:[],
      totalAmount:0,

};

const cartReducer = (state, action)=>{
      if(action.type === 'ADD_CARTITEM'){
            const updatedItems = state.items.concat(action.item);
            const updatedTotalAmount = state.totalAmount+ action.item.price*action.item.amount;
            return{
                  item:updatedItems,
                  totalAmount:updatedTotalAmount
            };
      }
      return defaultCartState;
};

const CartProvider = (props) => {

      const [cartState,dispatchCartAction] = useReducer(cartReducer, defaultCartState);

      const addItemHandler = (item) => {
            dispatchCartAction({type:'ADD_CARTITEM',item:item});
      };

      const removeItemHandler = (id) => {
            dispatchCartAction({type:'REMOVE_CARTITEM',id:id});
      };

      const cartContext ={
            item: cartState.items,
            totalAmount:cartState.totalAmount,
            addItem: addItemHandler,
            removeItem: removeItemHandler
      }

      return(
            <CartContext value={cartContext}>{props.children}</CartContext>
      );
};

export default CartProvider;

import { useContext } from "react";
import CartContext from "../../Store/Cart-Context";
import CartItem from "./CartItem";
import styles from "./Cart.module.css";
import Modal from "./Modal";


const Cart = (props) =>{
      const cartCtx = useContext(CartContext);

      const totalAmount = `₹${cartCtx.totalAmount.toFixed(2)}`;

      const cartItemAddHandler= (item) => {

      };

      const cartItemRemoveHandler=(id) => {

      };

      const cartItem = <ul className={styles['cart-items']}>
            {
                  cartCtx.items.map((item)=>
                  <CartItem 
                  key={item.id} 
                  name={item.name} 
                  amount={item.amount}
                  price={item.price} 
                  onAdd={cartItemAddHandler.bind(null,item)}
                  onRemove={cartItemRemoveHandler.bind(null,item.id)}      
                  />)
            }</ul>

      return(
            <Modal onClose={props.onClose}>
                  {cartItem}
                  <div className={styles.total}>
                        <span>Total Amount</span>
                        <span>{totalAmount}</span>
                  </div>
                  <div className={styles.actions}>
                        <button className={styles['button--alt']} onClick={props.onClose} >Close</button>
                        {cartCtx.items.length>0 &&   <button className={styles.button}>Order</button>}
                  </div>
            </Modal>
      );
};

export default Cart;

从“react”导入{useReducer}；
从“/Cart Context”导入CartContext；
常量默认状态={
项目：[]，
总数：0，
};
const cartReducer=（状态、操作）=>{
如果（action.type=='ADD\u CARTITEM'）{
const updateItems=state.items.concat（action.item）；
const updatedTotalAmount=state.totalAmount+action.item.price*action.item.amount；
返回{
项目：updatedItems，
totalAmount:UpdateTotalAmount
};
}
返回默认状态；
};
const CartProvider=（道具）=>{
const[cartState，dispatchCartAction]=useReducer（cartReducer，defaultCartState）；
常量addItemHandler=（项）=>{
dispatchCartAction（{type:'ADD_CARTITEM'，item:item}）；
};
常量removeItemHandler=（id）=>{
dispatchCartAction（{type:'REMOVE_CARTITEM'，id:id}）；
};
常量上下文={
项目：cartState.items，
totalAmount:cartState.totalAmount，
addItem:addItemHandler，
removeItem:removeItemHandler
}
返回(
{props.children}
);
};
导出默认提供程序；

这是我的渲染文件

import { useReducer } from "react";
import CartContext from "./Cart-Context";

const defaultCartState={
      items:[],
      totalAmount:0,

};

const cartReducer = (state, action)=>{
      if(action.type === 'ADD_CARTITEM'){
            const updatedItems = state.items.concat(action.item);
            const updatedTotalAmount = state.totalAmount+ action.item.price*action.item.amount;
            return{
                  item:updatedItems,
                  totalAmount:updatedTotalAmount
            };
      }
      return defaultCartState;
};

const CartProvider = (props) => {

      const [cartState,dispatchCartAction] = useReducer(cartReducer, defaultCartState);

      const addItemHandler = (item) => {
            dispatchCartAction({type:'ADD_CARTITEM',item:item});
      };

      const removeItemHandler = (id) => {
            dispatchCartAction({type:'REMOVE_CARTITEM',id:id});
      };

      const cartContext ={
            item: cartState.items,
            totalAmount:cartState.totalAmount,
            addItem: addItemHandler,
            removeItem: removeItemHandler
      }

      return(
            <CartContext value={cartContext}>{props.children}</CartContext>
      );
};

export default CartProvider;

import { useContext } from "react";
import CartContext from "../../Store/Cart-Context";
import CartItem from "./CartItem";
import styles from "./Cart.module.css";
import Modal from "./Modal";


const Cart = (props) =>{
      const cartCtx = useContext(CartContext);

      const totalAmount = `₹${cartCtx.totalAmount.toFixed(2)}`;

      const cartItemAddHandler= (item) => {

      };

      const cartItemRemoveHandler=(id) => {

      };

      const cartItem = <ul className={styles['cart-items']}>
            {
                  cartCtx.items.map((item)=>
                  <CartItem 
                  key={item.id} 
                  name={item.name} 
                  amount={item.amount}
                  price={item.price} 
                  onAdd={cartItemAddHandler.bind(null,item)}
                  onRemove={cartItemRemoveHandler.bind(null,item.id)}      
                  />)
            }</ul>

      return(
            <Modal onClose={props.onClose}>
                  {cartItem}
                  <div className={styles.total}>
                        <span>Total Amount</span>
                        <span>{totalAmount}</span>
                  </div>
                  <div className={styles.actions}>
                        <button className={styles['button--alt']} onClick={props.onClose} >Close</button>
                        {cartCtx.items.length>0 &&   <button className={styles.button}>Order</button>}
                  </div>
            </Modal>
      );
};

export default Cart;

从“react”导入{useContext}；
从“../../Store/Cart Context”导入CartContext；
从“/CartItem”导入CartItem；
从“/Cart.module.css”导入样式；
从“/Modal”导入模态；
常量车=（道具）=>{
const cartCtx=useContext（CartContext）；
const totalAmount=`₹${cartCtx.totalAmount.toFixed（2）}`；
常量cartItemAddHandler=（项）=>{
};
常量cartItemRemoveHandler=（id）=>{
};
const cartItem=

{
cartCtx.items.map（（item）=>
)
}
返回(
{cartItem}
总金额
{totalAmount}
接近
{cartCtx.items.length>0&&Order}
);
};
导出默认购物车；

我如何解决这个问题