跟随MERN认证教程遇报错：Uncaught TypeError: reducer is not a function

我正在学习The Net Ninja的MERN Authentication教程，完成注册表单后出现错误“Uncaught TypeError: reducer is not a function”。用户信息已成功保存至MongoDB，但控制台出现四个相关错误。以下是相关代码文件：

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthContextProvider } from './context/AuthContext';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AuthContextProvider>
      <App />
    </AuthContextProvider>
  </React.StrictMode>
)

useSignup.js #

import { useState } from "react";
import { useAuthContext } from './useAuthContext'

export const useSignup = () => {
    const [error, setError] = useState(null)
    const [isLoading, setIsLoading] = useState(null)
    const { dispatch } = useAuthContext()

    const signup = async (email, password) => {
        setIsLoading(true)
        setError(null)

        const response = await fetch('http://localhost:4000/api/user/signup', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({email, password})
        })

        const json = await response.json()

        if (!response.ok) {
            setIsLoading(false)
            setError(json.error)
        }

        if (response.ok) {

            // save the user to local storage
            localStorage.setItem('user', JSON.stringify(json))

            // Update the auth context
            dispatch({type: 'LOGIN', payload: json})
            
            setIsLoading(false)

        }
    }
    
    return { signup, isLoading, error }
} 

AuthContext.js #

import  { createContext, useReducer } from 'react'

export const AuthContext = createContext()

export const authReducer = (state, action) => {

    switch(action.type) {
        case 'LOGIN':
            return { 
                user: action.payload 
            }
        case 'LOGOUT':
            return { 
                user: null 
            }
        default:
            return state
    }
}

export const AuthContextProvider = ({ children }) => {
    const [state, dispatch] = useReducer({ authReducer }, { user: null })

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

useAuthContext.js #

import { AuthContext } from "../context/AuthContext";
import { useContext } from "react";

export const useAuthContext = () => {
    const context = useContext(AuthContext)

    if (!context) {
        throw Error('useAuthContext must be used inside an AuthContextProvider')
    }

    return context
}

错误原因与解决方案 #

错误原因 #

在AuthContext.js的AuthContextProvider组件中，调用useReducer时错误地将reducer函数包裹在了对象中：

const [state, dispatch] = useReducer({ authReducer }, { user: null })

useReducer的第一个参数要求是reducer函数本身，而不是包含函数的对象，React无法识别这个对象作为reducer，因此抛出“reducer is not a function”的错误。

解决方案 #

修改AuthContext.js中的useReducer调用，去掉包裹authReducer的对象括号，直接传递函数：

const [state, dispatch] = useReducer(authReducer, { user: null })

修改后，useReducer能正确识别reducer函数，调用dispatch({type: 'LOGIN', payload: json})时就能正常更新AuthContext的状态，控制台的错误也会消失。

注：后端逻辑正常，所以用户信息能成功存入MongoDB，只是前端Context状态更新因reducer错误失败导致报错。

内容的提问来源于stack exchange，提问作者bwash70