在 next.js 中使用带有 useReducer 钩子的 context Api 在调用 useContext 时会返回未定义的结果答案

【问题标题】：Using context Api with useReducer hook in next.js gives undifined back when useContext is called在 next.js 中使用带有 useReducer 钩子的 context Api 在调用 useContext 时会返回未定义的结果
【发布时间】：2020-11-04 01:12:23
【问题描述】：

我在 next.js 应用程序中使用带有 useReducer 钩子的 context Api，当使用 contextProvider 调用 useContext 时，它会返回未定义的内容。

下面是我的代码 => 上下文页面=>

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>;
};

在这里，数据是未定义的。卡住了。

【问题讨论】：

标签： reactjs next.js react-context

【解决方案1】：

应该是

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

【讨论】：

谢谢，我太傻了。有效。现在我必须将我的整个代码库从自定义钩子转移到上下文lol ..