React中useReducer返回undefined致页面崩溃问题求助

核心问题 #

组件崩溃的根源在于reducer函数未返回有效状态对象：

1. 你直接修改了传入的state参数（React要求状态不可变，直接修改会导致状态管理异常）
2. 当action不匹配任何判断条件时，reducer没有返回值，导致state变为undefined，后续访问state.username/state.password就会抛出「无法读取undefined的属性」错误。

修复后的完整代码 #

import React from "react";
import { useReducer } from "react";
import Card from "../UI/Card-Wrap/Card";
// 注意：代码中使用的Styles未导入，需补充对应模块导入，比如 import Styles from './Login.module.css'

const Login = () => {
  const reducer = (state, action) => {
    // 始终返回新状态对象，禁止直接修改原state
    if (action.id === "username") {
      return { ...state, username: action.value };
    }

    if (action.id === "password") {
      return { ...state, password: action.value };
    }

    // 必须返回默认状态，处理未匹配的action
    return state;
  };

  const [state, dispatch] = useReducer(reducer, {
    username: "",
    password: "",
  });

  const onChangeHandler = (e) => {
    // 构造明确的action对象，比直接传e.target更符合useReducer规范
    dispatch({ id: e.target.id, value: e.target.value });
  };

  return (
    <div>
      <Card>
        <form action="#" className={Styles.form}>
          <p>Login</p>
          <div className={Styles.username}>
            <label htmlFor="username">Username</label>
            <input
              type="text"
              id="username"
              onChange={onChangeHandler}
              value={state.username}
            />
          </div>
          <div className={Styles.password}>
            <label htmlFor="password">Password</label>
            <input
              type="password"
              id="password"
              onChange={onChangeHandler}
              value={state.password}
            />
          </div>
          <button type="submit">Submit</button>
        </form>
      </Card>
    </div>
  );
};

export default Login;

关键修复点 #

• 状态不可变：用扩展运算符...state复制原状态，再修改目标字段，返回全新的状态对象，避免直接篡改原state。
• 默认返回值：在reducer末尾添加return state，确保所有分支都返回有效状态，杜绝undefined的出现。
• 规范action格式：构造包含id和value的明确action对象，比直接传递DOM元素更清晰，也方便后续功能扩展。

此外，代码中使用的Styles未导入，需补充对应的CSS模块导入语句，否则会出现样式相关错误。

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