在 next.js 中使用带有 useReducer 钩子的上下文 Api 在调用 useContext 时给出未定义的返回

Question

我在我的 next.js 应用程序中使用 context Api 和 useReducer 挂钩，当使用 contextProvider 调用 useContext 时，它会返回未定义的信息。

下面是我的代码=> contextPage=>

import React, { createContext, useReducer, useContext } from 'react';
import * as types from '../constants/userConstants';

// initialized global store

export const quizContext = createContext();

// reducer

const reducer = (state, action) => {
  switch (action.type) {
    case types.USER_LOGIN_SUCCESS:
      return // user

    case types.USER_LOGOUT_SUCCESS:
      return // clear user

    default:
      return state;
  }
};

const QuizContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {
    user: null,
  });

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

export const useQuizContext = () => useContext(QuizContextProvider);

export default QuizContextProvider;

之后，我将我的提供程序包装在 _app.js 中。

在我的登录页面上，我无法访问它。登录页面=>

const index = () => {
  const data = useQuizContext();
  console.log(data);
  return <div></div>;
};

此处，数据未定义。严重卡住。

Answer 1

应该是

export const useQuizContext = () => useContext(quizContext)

在 next.js 中使用带有 useReducer 钩子的上下文 Api 在调用 useContext 时给出未定义的返回

Using context Api with useReducer hook in next.js gives undifined back when useContext is called

reactjs

next.js

react-context