如何在React中使用useReducer更新嵌套对象

Question

如何使用此use reducer更新courseName？错误："；无法在字符串"上的courseName上创建属性；科学">我假设我没有正确访问它？我一直在使用useState，但我想学习用于更复杂对象的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 object = {
courseName: "Mathematics",
courseModules: [
{
moduleName: "module1",
isComplete: false,
lessons: [
{
lessonName: "Lesson1",
isComplete: false,
progress: 0,
},
],
},
],
};
const [state, dispatch] = useReducer(reducer, { object });
function updateName() {
dispatch({ type: "update" });
}
return (
<div>
<h1>{object.courseName}</h1>
<button onClick={updateName}>submit</button>
</div>
);
}

Answer 1

您可以展开对象，只覆盖一个值。

switch (action.type) {
case "update":
return { ...state, object: { ...state.object, courseName: "Science"}};
default:
return state;
}