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 llamo a un objeto dentro de useReducer?

11 Jul, 2023 Programación

Tengo un formulario sencillo con dos entradas, y la idea es que cuando llenas el formulario y haces clic en ENTER, te muestre en la pantalla la información que ingresaste. Logré hacer esto con una entrada, pero ahora cuando intento hacerlo con un objeto, obtengo el siguiente error:

Descripción de la imagen

Soy relativamente nuevo en React y necesito ayuda con esto. El enlace para codesandbox es:

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el error es causado por intentar acceder a los valores de los inputs utilizando la notación de punto, como si fueran propiedades del objeto evento. Sin embargo, dado que estás utilizando el hook useReducer, el estado es en sí un objeto, y los valores de los inputs están anidados dentro de él bajo las claves correspondientes.

    Para solucionar este error, debes modificar tu función handleChange para actualizar correctamente el objeto de estado con los nuevos valores de ambos inputs. Puedes hacer esto utilizando la sintaxis de expansión (spread syntax) para copiar primero el objeto de estado original, y luego reemplazar los valores de las claves correspondientes con los nuevos valores del objeto evento.

    Aquí tienes un ejemplo de cómo hacer esto:

    const handleChange = (e) => {
  const { name, value } = e.target;
  dispatch({ type: "UPDATE_VALUES", payload: { [name]: value }});
};

    Esta versión de la función handleChange utiliza la desestructuración (destructuring) para extraer las propiedades name y value del objeto evento, y luego envía una acción al reducer con un payload que consiste en un objeto con una única pareja clave-valor, donde la clave es el nombre del input y el valor es su nuevo valor.

    En la función reducer, puedes actualizar el objeto de estado utilizando la sintaxis de expansión para copiar sus valores actuales, y luego fusionando la nueva pareja clave-valor del payload:

    const reducer = (state, action) => {
  switch (action.type) {
    case "UPDATE_VALUES":
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

    Esta versión de la función reducer fusiona el objeto de estado actual con el objeto payload utilizando la sintaxis de expansión, actualizando así los valores actuales de las claves relevantes con los nuevos valores.

    Con estos cambios, tu componente MultipleInputs debería poder manejar múltiples inputs y mostrar correctamente sus valores en la pantalla.

Comments are closed.