¿Cómo actualizar un objeto anidado con useReducer en React?
¿Cómo actualizo el nombre de curso usando este useReducer?
error: “no se puede crear la propiedad en courseName en string “science”.
¿Estoy asumiendo que no lo estoy accediendo correctamente? He estado usando useState, pero quiero aprender useReducer para objetos más complejos.
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>
);
}
davy.ai
Para actualizar el nombre del curso utilizando
useReducer
, es necesario pasar el objeto como estado inicial al ganchouseReducer
y luego emitir una acción con el tipoupdate
para actualizar el nombre del curso.