React中如何使用useReducer更新嵌套对象的courseName并解决报错

错误原因 #

• reducer更新逻辑存在两处问题：
  1. 直接对原状态state.object.courseName赋值属于非法的原地修改操作，不符合React状态不可变的要求
  2. 赋值表达式state.object.courseName = "Science"的返回值是等号右侧的字符串"Science"，你直接把这个字符串作为新状态里的object字段值返回，导致后续state.object从对象变成了字符串，再次访问state.object.courseName时就会触发你遇到的报错
• 渲染逻辑错误：JSX中读取的是组件内部定义的常量object，不是useReducer返回的响应式状态，所以状态更新后页面不会刷新

修正代码 #

import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "update":
      // 基于原对象浅拷贝后修改指定字段，不修改原状态
      return {
        object: {
          ...state.object,
          courseName: "Science"
        }
      };
    default:
      return state;
  }
}

export default function TestPage() {
  // 初始状态单独定义，避免每次重渲染重复创建对象
  const initObject = {
    courseName: "Mathematics",
    courseModules: [
      {
        moduleName: "module1",
        isComplete: false,
        lessons: [
          {
            lessonName: "Lesson1",
            isComplete: false,
            progress: 0,
          },
        ],
      },
    ],
  };

  const [state, dispatch] = useReducer(reducer, { object: initObject });

  function updateName() {
    dispatch({ type: "update" });
  }

  return (
    <div>
      {/* 读取useReducer返回的响应式状态 */}
      <h1>{state.object.courseName}</h1>
      <button onClick={updateName}>submit</button>
    </div>
  );
}

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