es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo actualizar un objeto anidado con useReducer en React?

27 May, 2023 Programación

¿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>
  );
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para actualizar el nombre del curso utilizando useReducer, es necesario pasar el objeto como estado inicial al gancho useReducer y luego emitir una acción con el tipo update para actualizar el nombre del curso.

    import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "update":
      return { ...state, courseName: "Ciencias" };

    default:
      return state;
  }
}

export default function TestPage() {
  const object = {
    courseName: "Matemáticas",
    courseModules: [
      {
        moduleName: "module1",
        isComplete: false,
        lessons: [
          {
            lessonName: "Lección 1",
            isComplete: false,
            progress: 0,
          },
        ],
      },
    ],
  };

  const [state, dispatch] = useReducer(reducer, object);

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

  return (
    <div>
      <h1>{state.courseName}</h1>
      <button onClick={updateName}>enviar</button>
    </div>
  );
}

Comments are closed.