0

No encuentro la manera de incorporar un nuevo registro en un arreglo de objetos como el que planteo más abajo. Estoy iniciándome en React Native y Javascript, por lo que cualquier orientación será bienvenida.

El escenario es el siguiente:

const [gastosxpart, crudGastosxpart] = useState([
        {
            nombre: "Raúl",
            data:[{
                id:1,
                fecha: "25/03/21",
                monto_abonado: "1000",
                concepto: "gasolina",
                observ: ""}
            ]
        },
        {
            nombre: "Karina",
            data:[
                {
                id: 1,
                fecha: "19/03/21",
                monto_abonado: "500",
                concepto: "verduras",
                observ: ""
                },
                {
                id: 2,
                fecha: "19/03/21",
                monto_abonado: "1100",
                concepto: "bebidas",
                observ: ""
                }
            ]
        },
        {
            nombre: "Marisa",
            data:[
                {
                id:1,
                fecha: "21/03/21",
                monto_abonado: "700",
                concepto: "helado",
                observ: "2 kg"
                }
            ]
        }
    ]);

De la manera siguiente logro incorporar un nuevo objeto:

 crudGastosxpart(gastosxpart => [
                ...gastosxpart, 
                {nombre: quiengasto, data:[{id: gastosxpart.length.toString(), fecha: estegasto.fecha, monto_abonado: cuantogasto, concepto: estegasto.detalle, observ: ""}]},
            ])

Ahora, mi problema es, por ejemplo, si quiero agregar otro subelemento en el campo data del elemento/objeto principal Raúl (id:2..), no sé como hacerlo.

Gracias por cualquier ayuda !!.

1 respuesta 1

1

Primero debes conocer el inidice de tu elemento.

const index = gastosxpart.findIndex(e => e.nombre === "Raúl");

Luego con ese indice, ya puedes añadir el elemento:

crudGastosxpart(gastosxpart => [
    ...gastosxpart.slice(0,index),
    {...gastosxpart[index], data: [
        ...gastosxpart[index].data,  
        //aqui el nuevo elemento
        {id: 2, fecha: estegasto.fecha, monto_abonado: cuantogasto, concepto: estegasto.detalle, observ: ""}]},            
    ...gastosxpart.slice(index+1)
]);

Aqui te dejo un ejemplo funcionando:

const gastosxpart = [
        {
            nombre: "Raúl",
            data:[{
                id:1,
                fecha: "25/03/21",
                monto_abonado: "1000",
                concepto: "gasolina",
                observ: ""}
            ]
        },
        {
            nombre: "Karina",
            data:[
                {
                id: 1,
                fecha: "19/03/21",
                monto_abonado: "500",
                concepto: "verduras",
                observ: ""
                },
                {
                id: 2,
                fecha: "19/03/21",
                monto_abonado: "1100",
                concepto: "bebidas",
                observ: ""
                }
            ]
        },
        {
            nombre: "Marisa",
            data:[
                {
                id:1,
                fecha: "21/03/21",
                monto_abonado: "700",
                concepto: "helado",
                observ: "2 kg"
                }
            ]
        }
    ];
    
    const index = gastosxpart.findIndex(e => e.nombre === "Raúl");
    console.log("Indice", index);
    let newGastosxpart = [
        ...gastosxpart.slice(0,index),
        {
            ...gastosxpart[index], 
            data: [
                ...gastosxpart[index].data,  
                //aqui el nuevo elemento
                {id: 2, test: "Si funciona!"}
           ]
        },          
        ...gastosxpart.slice(index+1)
    ];
    
    console.log("antes", gastosxpart);
    console.log("despues", newGastosxpart)

11
  • introduje el código pero me tira el siguiente error: TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    – Raul
    Commented el 25 mar. 2021 a las 22:10
  • @Raul Acabo de editar mi respuesta, y agregué un ejemplo funcionando
    – Pipe
    Commented el 26 mar. 2021 a las 12:59
  • Lo implementaré @Pipe. Agredecido por el aporte. Después comento resultado.
    – Raul
    Commented el 26 mar. 2021 a las 15:24
  • Creo identificar el inconveniente @Pipe: al correr el código y pretender cargar el arreglo gastosxpart dentro de un useEffect(), el arreglo no refleja el alta de registros en tiempo real, por lo que el índice obtenido es siempre -1 cuando quiero operar sobre un registro previamente dado de alta, simplemente no lo encuentra. Entonces, el código que propusiste funciona correctamente, y lo que debería conocer ahora es cómo reflejar las altas de elementos/objetos en tiempo real dentro de un useEffect()...
    – Raul
    Commented el 31 mar. 2021 a las 12:22
  • Entonces el problema debe ser que el useEffect no tiene a gastosxpart en su array de dependencias.. y por eso no tiene el valor actualizado
    – Pipe
    Commented el 1 abr. 2021 a las 22:05

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.