使用useReducer管理数据时state为undefined的问题求助

问题描述 #

使用useReducer处理员工数据的增删改操作时，执行const [state, dispatch] = useReducer(reducer, employees)后，state始终为undefined。组件能通过useState的employees正常获取数据，但useReducer的状态完全无法正常工作。

问题根源 #

1. useReducer初始值仅生效一次：employees初始为空数组，axios异步请求完成后setEmployees更新的是useState的状态，但useReducer不会随employees的更新重新初始化，始终使用首次渲染的空数组。
2. reducer的default分支未返回state：当触发默认action（包括初始化阶段），reducer没有返回任何值，直接导致state变为undefined。
3. 状态管理冗余混乱：同时用useState和useReducer管理同一份员工数据，逻辑重叠且割裂，完全没必要。

修复步骤 #

1. 修正reducer的default分支

确保reducer在任何情况下都返回有效状态值，修改/context/reducer.js：

import { UPDATE, CREATE, DELETE, INIT } from './action'

const reducer = (state, action) => {
  console.log('state en reducer > ', state)
  console.log(action.type, ' > ', action.payload)

  switch (action.type) {
    case INIT:
      return {
        ...state,
        employees: action.payload
      }
    case UPDATE:
      return {
        ...state,
        employees: state.employees.filter((employee) => {
          return employee.id !== action.payload
        })
      }
    // 后续可补充CREATE、DELETE的处理逻辑
    default:
      // 必须返回当前state，避免状态丢失
      return state
  }
}

export default reducer

2. 统一用useReducer管理状态，移除冗余useState

修改/context/AppContext.js，删除employees和initialState两个useState，直接用useReducer管理全量状态，通过dispatch初始化异步数据：

import {
  createContext,
  useContext,
  useReducer,
  useEffect
} from 'react'
import reducer from './reducer'
import { UPDATE, CREATE, INIT } from './action'
import axios from 'axios'

export const AppContext = createContext()

// 定义useReducer的初始状态结构
const initialState = {
  employees: []
}

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

  useEffect(() => {
    async function fetchData() {
      const { data } = await axios.get('http://localhost:8000/employees')
      // 通过dispatch初始化数据
      dispatch({ type: INIT, payload: data })
    }
    fetchData()
  }, [])

  const updateEmployee = (employeeId) => dispatch({
    type: UPDATE, payload: employeeId
  })

  const createEmployee = (newEmployee) => dispatch({
    type: CREATE, payload: newEmployee
  })

  return (
    <AppContext.Provider
      value={{
        employees: state.employees, // 从useReducer的state中取数据
        updateEmployee,
        createEmployee
      }}
    >
      {children}
    </AppContext.Provider>
  )
}

export const useAppContext = () => {
  return useContext(AppContext)
}

3. 补充INIT action类型到action.js

更新/context/action.js：

export const CREATE = 'CREATE_EMPLOYEE'
export const UPDATE = 'UPDATE_EMPLOYEE'
export const DELETE = 'DELETE_EMPLOYEE'
export const INIT = 'INIT_EMPLOYEES' // 新增初始化action类型

4. 组件使用逻辑保持不变

之前的Show组件无需修改，useAppContext获取的employees现在来自useReducer的state，使用逻辑完全一致：

import React from 'react'
import Table from 'react-bootstrap/Table'
import { useAppContext } from '../context/AppContext'
import Edit from './Edit'

const Show = () => {
  const { employees } = useAppContext()
  // 正常映射数据即可
  return (
    <Table striped bordered hover>
      {/* 渲染员工数据 */}
    </Table>
  )
}

关键注意点 #

• useReducer的初始值仅在组件首次渲染时生效，异步数据必须通过dispatch更新state，不能依赖useState的更新重新初始化useReducer。
• reducer的所有分支必须返回有效状态，default分支务必返回当前state，否则会直接导致state变为undefined。
• 状态管理尽量统一，避免同时用useState和useReducer管理同一份数据，防止逻辑混乱。

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