我有简单的商店

import React, { createContext, useReducer } from "react";
import Reducer from "./UserReducer";

const initialState = {
    user: {},
    error: null
};

const Store = ({ children }) => {
    const [state, dispatch] = useReducer(Reducer, initialState);
    return (
        <Context.Provider value={[state, dispatch]}>
            {children}
        </Context.Provider>
    );
};

export const Context = createContext(initialState);
export default Store;

我已经用它包裹了我的应用程序

<Store>
    <ThemeProvider theme={Theme}>
        <CssBaseline />
        <Navbar />
        <Wrapper>
            <Profile />
        </Wrapper>
    </ThemeProvider>{" "}
</Store>

还有一些额外的设置，我的身份验证页面位于单独的包装器中，所以我也用商店包装了它。

这是该包装器的代码（额外删除）。

import Store from "../../../context/Store";
export default function Wrapper({ children }) {
    const classes = useStyles();
    return (
        <Store>
           //different dumb containers opening
                {children}
          //different dumb containers closing
        </Store>
    );
}

现在当我尝试访问子组件中的上下文时

import React, { useContext } from "react";
import { Context } from "../../../context/Store";
import { SET_USER } from "../../../context/UserTypes";

function SignUp(props) {
    const [state, setState] = React.useState({ ...initialState });

    const [userData, dispatch] = useContext(Context);
    console.log(userData, dispatch, "check");
// rest of component

我收到以下错误

TypeError: undefined is not a function

我试图在不解构它的情况下记录 useContext 的结果，但它只有全局状态，但没有调度功能。

Reactjs 版本 = 17.0.1

更新：dispatch 可以在 withAuthenticator HOC 之外访问，但不能在里面访问，所以它可能是放大问题。

我在放大回购上打开了问题。

无法从使用 Authenticator 包装的组件访问 useContext 的调度