Reactjs 在盖茨比派遣用户教育者

我是盖茨比的新手，希望你们都能帮助我。 我得到了一个typeerror：dispatch不是一个函数消息，已经两天没有找到我的打字错误了。我正在尝试制作一个购物车，需要将产品传递到一个全球国家。只有当我在handleClick函数中设置dispatch时，我似乎才发现了问题（该函数仅与console.log一起工作，并接收产品）

这是我的密码。首先是提供程序，然后是布局，最后是包含单个产品的模板：

const CartStateContext = createContext();
const CartDispatchContext = createContext();
const reducer = (state, action) => {
    switch (action.type) {
        case "ADD":
            return [...state, action.item];
        default: 
        throw new Error(`unknown action ${action.type}`);
    }
};

export const CartProvider = ({ children }) => {
    const [ state, dispatch ] = useReducer(reducer, [])

    return (
        <CartDispatchContext.Provider value={dispatch}>
            <CartStateContext.Provider value={state}>
                {children}
            </CartStateContext.Provider>
        </CartDispatchContext.Provider>
        
    )
};

export const useCart = () => useContext(CartStateContext);
export const useDispatchCart = () => useContext(CartDispatchContext);

/* layout component */

import React, { useState } from 'react';
import Container from './Container';
import Footerone from './Footerone/Footerone';
import HeaderOne from './HeaderOne/HeaderOne';
import ShopHeaderOne from './ShopHeaderOne/ShopHeaderOne';
import { CartContext } from './CartContext';
import { CartProvider } from './Cart'

export default ({ children }) => { 
    const[cartVisible, setCartVisible] = useState(false);

    const toggleCart = () => {
        setCartVisible(!cartVisible)
    };


    return (
        <Container>   
            <CartProvider>      
                <CartContext.Provider value={{ cartVisible, toggleCart}}>
                    <HeaderOne />
                    <ShopHeaderOne />
                    { children }
                    <Footerone />
                </CartContext.Provider> 
            </CartProvider>
        </Container>
     )
}

/* singleproduct */

import React from 'react'
import Layout from "../Components/Layout"
import './templates.scss'
import { useDispatchCart } from '../Components/Cart';

export default ( props ) => {
  const product = props.pageContext
  const dispatch = useDispatchCart();


  const handleClick = (item) => {
    dispatch({ type: "ADD", item }) 
  }

  console.log(product)

    return (  
        <Layout>         
            <section className="single-grid">
              <h1>{product.headline}</h1>
              <img src={product.image.mediaItemUrl} alt={product.image.altText}/>
              <p>{product.price}</p>
                <button onClick={handleClick(product)}>Føj til kurv</button>
            </section>       
        </Layout>
    )
}

const CartStateContext=createContext（）；
const CartDispatchContext=createContext（）；
const reducer=（状态、操作）=>{
开关（动作类型）{
案例“添加”：
返回[…状态、动作、项]；
违约：
抛出新错误（`unknown action${action.type}`）；
}
};
export const CartProvider=（{children}）=>{
const[state，dispatch]=useReducer（reducer，[]）
返回(
{儿童}
)
};
export const useCart=（）=>useContext（CartStateContext）；
导出const useDispatchCart=（）=>useContext（CartDispatchContext）；
/*布局组件*/
从“React”导入React，{useState}；
从“./Container”导入容器；
从“./Footerone/Footerone”导入Footerone；
从“./HeaderOne/HeaderOne”导入HeaderOne；
从“./shopbeaderone/shopbeaderone”导入Shopbeaderone；
从“./CartContext”导入{CartContext}；
从“./Cart”导入{CartProvider}
导出默认值（{children}）=>{
const[cartVisible，setCartVisible]=useState（false）；
const toggleCart=（）=>{
setCartVisible（！cartVisible）
};
返回(
{儿童}
)
}
/*单产品*/
从“React”导入React
从“./组件/布局”导入布局
导入“./templates.scss”
从“../Components/Cart”导入{useDispatchCart}；
导出默认值（道具）=>{
const product=props.pageContext
const dispatch=useDispatchCart（）；
常量handleClick=（项）=>{
分派（{type:“ADD”，item}）
}
console.log（产品）
报税表（
{product.headline}
{产品价格}

Føj til kurv
)
}

您是否尝试过直接绑定

调度

return (  
    <Layout>         
        <section className="single-grid">
          <h1>{product.headline}</h1>
          <img src={product.image.mediaItemUrl} alt={product.image.altText}/>
          <p>{product.price}</p>
            <button onClick={()=>  dispatch({ type: "ADD", item })}>Føj til kurv</button>
        </section>       
    </Layout>
)

返回（
{product.headline}
{产品价格}

调度（{type:“ADD”，item}）}>Føj til kurv
)

---

如果问题仍然存在，请检查

减速器

，以查看其设置是否正确。

我刚刚发现，当控制台记录时，我的调度未定义。我不知道这是否缩小了问题的范围。嗨，谢谢你的回答。可悲的是，它仍然不起作用。我不知道如何检查减速机，但我发现如果我在我的功能之外使用console.log useDispatchCart，我可以看到它。但是，当我尝试将其放入函数中的const og时，它会出现未定义的情况，因此上下文似乎是

未定义的
？如果我说：const dispatch=useDispatchCart（）console.log（dispatch）；我没有定义。但是如果我说console.log（useDispatchCart），我明白了。你能提供日志吗？也许你需要解构dispatcher
const{dispatch}=useDispatchCart（）
我现在已经找到了一些答案。使用Gatsby时，在布局周围包装提供程序是不起作用的。您必须创建一个gatsby-ssr.js和一个gatsby-browser.js文件，并在此处声明状态。我还没有成功。当我这样做的时候，我会发布答案。