我已经使用useEffect来获取API，并从它内部分派一个动作来更新状态。我正在使用上下文API，useReducer来进行状态管理，并且在这个项目中还使用了react-router。
在Header.js * 中，一旦 * 我导入/使用CartState和状态变量（例如cart.length），应用程序就会崩溃，来自api的项目不会呈现，我会得到这个错误。在home.js中，我也使用状态，但只有这一部分不会给予任何错误。下面我附加了两个图像，一个有错误，另一个在我从header.js中删除CartState时呈现
或者您可以看到 codesandbox：https://codesandbox.io/s/serene-fast-297j3h?from-embed=&file=/
Website picture when CartState removed from header.js
Error message - website picture
请告诉我这里的问题是什么，应该做些什么。

索引.js文件：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter } from "react-router-dom";
import GlobalContext from './context/GlobalContext'

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <GlobalContext>
        <App />
      </GlobalContext>
    </BrowserRouter>
  </React.StrictMode>
);

应用程序js：

import "./App.css";
import Header from "./Components/Header";
import { Routes, Route } from "react-router-dom";
import Home from './Components/Home/Home'
import Cart from './Components/Cart'

function App() {
  return (
    <>
      <Header />
      <Routes>
        <Route path="/" exact element={<Home/>}></Route>
        <Route path="/cart" exact element={<Cart/>}></Route>
      </Routes>
    </>
  );
}
export default App;

全局上下文.js：

const CartContext = createContext();
const GlobalContext = ({children}) => {
  const initialState ={
    products: [],
    cart: []
  };
useEffect( ()=>{
    const fetchData = async ()=> {
      const res = await axios('https://fakestoreapi.com/products');

      const resAdd = res.data.map((item)=> ({...item, inStock: faker.helpers.arrayElement([0,2,5,9,20]), fastDelivery: faker.datatype.boolean() }));

      dispatch({type: 'API_CALL_SUCCESS', payload: resAdd});
      // console.log(initialState);
    }
    fetchData();
  }, [] )
  const [state, dispatch] = useReducer(cartReducer, initialState );
  console.log(state);
  return (
    <CartContext.Provider value={{state, dispatch}}>
        {children}
    </CartContext.Provider>
  );
};
export default GlobalContext;
export const CartState = () => {
  return useContext(CartContext);
};

Header.js（代码的一部分）

import CartState from "../context/GlobalContext";
const Header = () => {
  const {
    state: { cart },
    dispatch,
  } = CartState();

return (
    <Navbar bg="dark" variant="dark" style={{ height: 100 }}>
      <Container>
        <Navbar.Brand>
          <Link to="/">HOME</Link>
        </Navbar.Brand>
        <FormControl
          className="m-auto"
          style={{ width: 500 }}
          type="text"
          placeholder="Search here the product you want"
        />

        <Nav>
          <Dropdown
          // alignRight
          >
            <Dropdown.Toggle variant="success">
              <FaShoppingCart color="white" fontSize="25px" />
              <Badge>
                {cart.length}
              {/* 1 */}
              </Badge>
            </Dropdown.Toggle>

主页.js：

import { CartState } from '../../context/GlobalContext'
import SingleProduct from '../SingleProduct';
import './styles.css'
import Filters from '../Filter/Filters';

const Home = () => {
  const {state: {products}, } = CartState();
  console.log(products);

  return (
    <div className="home">
      <Filters />
      <div className="productContainer">
        {products.map( (item)=> 
          <SingleProduct prod = {item} key = {item.id} />
         )}
      </div> 
    </div>
  )
}
export default Home