0

Qué tal, vengo desarrollando una aplicación en NextJS, el asunto es que tengo un formulario que envía información a una API para posteriormente ser cargado en Mongo; sin embargo, debido a que el modelo contiene un array de objetos se me está dificultando el poder manipular los campos que representan las propiedades de estos, estoy intentando usar una función que se encarga de manipular el estado por medio de la propiedad onChange pero aún así no me permite ingresar datos en los campos. Adjunto fragmentos de código para hacer más entendible el caso:

Modelo

const ProductSchema = new mongoose.Schema({
    productCode: {
        type: String,
        required: true
    },
    category: {
        type: String,
        required: true
    },
    name: {
        type: String,
        required: true
    },
    material: {
        type: String,
        required: true
    },
    season: {
        type: String,
        required: true
    },
    color: {
        type: String,
        required: true
    },
    sizes:[
        {
            size:{
                type: String
            },
            stock:  {
                type: Number
            },
            prize:{
                type: Number
            }
        },
        {
            size:{
                type: String
            },
            stock:  {
                type: Number
            },
            prize:{
                type: Number
            }
        }
    ]
    
})

Hook de estado

const [form, setForm] = useState({
productCode: formData.productCode,
category: formData.category,
name: formData.name,
material: formData.material,
season: formData.season,
color: formData.color,
sizes:[
  {
    size: formData.sizes[0].size,
    stock: formData.sizes[0].stock,
    prize: formData.sizes[0].prize
  },
  {
    size: formData.sizes[1].size,
    stock: formData.sizes[1].stock,
    prize: formData.sizes[1].prize
  }
]

});

Componente

<p>
          Color:{" "}
          <input
            type="text"
            name="color"
            value={form.color}
            onChange={handleChange}
          />
        </p>
        <div>
          <p>Talla S</p>
          <p>
            Talla:{" "}
            <input
              type="text"
              name="size"
              value={form.sizes[0].size}
              onChange={handleChange}
            />
          </p>
          <p>
            Stock:{" "}
            <input
              type="number"
              name="stock"
              value={form.sizes[0].stock}
              onChange={handleChange}
            />
          </p>
          <p>
            Precio:{" "}
            <input
              type="number"
              name="prize"
              value={form.sizes[0].prize}
              onChange={handleChange}
            />
          </p>
    </div>

Función handle

  const handleChange = (e) => {
    const { value, name } = e.target;
    setForm({
      ...form,
      [name]: value,
    });
  };

Creo que el problema está en la función handle pero no estoy realmente seguro, muchas gracias.

1
  • Olvide mencionar, el problema ocurre unicamente con los campos que representan las propiedades de cada objeto dentro de sizes. Con el resto de propiedades no tengo ningún problema, los inputs se ingresan correctamente. el 8 may. 2022 a las 0:02

1 respuesta 1

1

El problema lo tienes que estas tratando la propiedad sizes como un valor de tipo string, cuando es array de objeto.

La solución que te propongo es la de añadir un manejador para este tipo de campos utilizando el indice del array, te muestro un ejemplo:

  • Manejador:

    const handerResize = (event, index)=>{
      const { sizes } = form
      const { value, name } = e.target;
      sizes[index][name] = value
      setForm({ ...form, sizes });
    }
    
  • Componente de React

    <div>
      {form.sizes.map((size, index) => {
       return (<div>
         <p>{`Talla ${index === 0 ? 'S' : '¿¿¿???'}`}</p>
        <p>
          Talla:{" "}
          <input
            type="text"
            name="size"
            value={size.size}
            onChange={(event)=> handerResize(event, index)}
          />
        </p>
        <p>
          Stock:{" "}
          <input
            type="number"
            name="stock"
            value={size.stock}
            onChange={(event)=> handerResize(event, index)}
          />
        </p>
        <p>
          Precio:{" "}
          <input
            type="number"
            name="prize"
            value={size.prize}
            onChange={(event)=> handerResize(event, index)}
          />
        </p>
      </div>)})
    </div 
    
1
  • Muchas gracias, solucionó al 100 mi problema :) el 9 may. 2022 a las 20:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.