0

Tengo el siguiente código con el que quisiera cargar una arreglo dinámico partiendo de otros dos arreglos, en principio, predefinidos.

Propósito: utilizar dicho arreglo para completar una SectionList agrupada por nombre de participante, desde el hook UseEffect.

Problema: al no registrarse las altas de los elementos del arreglo gastosxpart en tiempo real (luego del renderizado, en el UseEffect), la función RegistroGastoxPart siempre ingresa por índice -1, porque no acusa el impacto de las nuevas altas que se hubieran hecho con anterioridad.

El código es el siguiente:

import React, { useState, useEffect  } from 'react';
import { Text, View, SectionList } from 'react-native';

const EjemploSectionList = () => {

    // variable para dependencia del UseEffect
    const [bandera, setBandera] = useState(true);

    // Arreglo de gastos por participante para carga dinámica
    const [gastosxpart, crudGastosxpart] = useState([]);

    // Arreglo de participantes
    const [participantes, crudParticipantes] = useState([
        { id:"1", nombre: "Raúl", din_entre: "0", observ: "" },
        { id:"2", nombre: "Karina", din_entre: "0", observ: "" },
        { id:"3", nombre: "Marisa", din_entre: "0", observ: "" }
    ]);

    // Arreglo de gastos generales
    const [gastos, crudGastos] = useState([
        { id:"1", fecha: "25/03/21", detalle: "gasolina", monto: "1000", quien_pago: "Raúl", observ: "" },
        { id:"2", fecha: "19/03/21", detalle: "verduras", monto: "500", quien_pago: "Karina", observ: "" },
        { id:"3", fecha: "19/03/21", detalle: "bebidas",  monto: "1100", quien_pago: "Karina", observ: "" },
        { id:"4", fecha: "21/03/21", detalle: "helado", monto: "700", quien_pago: "Marisa", observ: "2 kg" },
        { id:"5", fecha: "27/03/21", detalle: "obsequios", monto: "2500", quien_pago: "Raúl", observ: "" },
    ]);

    // Función para el registro de gastos por participante
    const RegistroGastoxPart = (estegasto, quiengasto, cuantogasto) => {

        const index = gastosxpart.findIndex(e => e.nombre === quiengasto);
        if (index < 0) {
            crudGastosxpart(gastosxpart => [
                ...gastosxpart, 
                {nombre: quiengasto, data:[{id: gastosxpart.length.toString(), fecha: estegasto.fecha, monto_abonado: cuantogasto, concepto: estegasto.detalle, observ: ""}]},
            ]);
        } else {
            crudGastosxpart(gastosxpart => [
                ...gastosxpart.slice(0,index),
                {
                    ...gastosxpart[index],
                    data: [
                        ...gastosxpart[index].data, 
                        //aqui el nuevo elemento
                        {id: gastosxpart.length.toString(), fecha: estegasto.fecha, monto_abonado: cuantogasto, concepto: estegasto.detalle, observ: ""}
                    ]
                },            
                gastosxpart.slice(index + 1)
            ]);
        };
    };

    useEffect(() => {
        const ContabilizarGastos = () => {
            participantes.forEach((participantes) => {
                gastos.forEach((gastos) => {
                    if (gastos.quien_pago === participantes.nombre) {
                        RegistroGastoxPart(gastos, gastos.quien_pago, gastos.monto);
                    }
                });
            });
            setBandera(!bandera);
        }

        if(bandera) {
            ContabilizarGastos();
        }
        console.log("Arreglo gastos x participante actualizado", gastosxpart);
    },[bandera, JSON.stringify(gastos)]);

    return (
        <View>
            <SectionList
                renderSectionHeader={({section}) => <View><Text>{section.nombre}</Text></View>}
                renderItem={({item}) => <View><Text> {item.concepto} --`{'>'}` ${item.monto_abonado}</Text></View>}
                sections={gastosxpart}
                keyExtractor={(item) => item.id}
            />
        </View>
    );
}

export default EjemploSectionList;

La estructura del nuevo arreglo gastosxpart debería quedar, para el ejemplo, del siguiente modo:

const [gastosxpart, crudGastosxpart] = useState([
        {
            nombre: "Raúl",
            data:[{
                id:1,
                fecha: "25/03/21",
                monto_abonado: "1000",
                concepto: "gasolina",
                observ: ""
                },
                {
                id: 2,
                fecha: "27/03/21",
                monto_abonado: "2500",
                concepto: "obsequios",
                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"
                }
            ]
        }
    ]);
4
  • Como quieres que quede estructurado el gastosxpart? podrías añadir un ejemplo de como quieres esa estructura a tu pregunta?
    – Pipe
    el 8 abr. 2021 a las 12:52
  • Ya actualicé la consulta con ese ejemplo @Pipe
    – Raul
    el 8 abr. 2021 a las 22:34
  • ¿Cómo se supone que se hace el registro? ¿Omitiste la parte del formulario? el 10 abr. 2021 a las 2:15
  • Hola @JoseNoriega, el registro lo desarrollaré más adelante, por eso no hay formulario. Ahora asumo un escenario de dos arreglos fijos, predefinidos (participantes y gastos).
    – Raul
    el 10 abr. 2021 a las 11:58

2 respuestas 2

0

Me parece que no estás usando de manera correcta los hooks o al menos no estás lidiando correctamente con el asincronismo.

crudGastosxpart funciona de forma asíncrona, lo que significa que no se ejecuta o resuelve de manera inmediata, es decir, no nos garantiza el orden ni el tiempo en el que la función de tipo set de tu variable de estado es actualizada.

Solución

Como solución te propongo evitar el uso de las funciones setState (en tu caso crudGastosxpart) dentro de ciclos. La estrategia que te recomiendo es primero tratar o normalizar los datos para al final de ello actualizar tu estado.

Siguiendo esta estrategia hice los siguientes cambios a tu código para llegar al resultado esperado:

import React, {useState, useEffect} from 'react';
import {
  Text,
  View,
  SectionList,
  SafeAreaView,
  TextInput,
  KeyboardAvoidingView,
  TouchableOpacity,
} from 'react-native';

export default function EjemploSectionList() {
  // Variables del formulario
  const [nombre, setNombre] = useState(null);
  const [fecha, setFecha] = useState('10/04/2021');
  const [detalle, setDetalle] = useState(null);
  const [monto, setMonto] = useState(null);

  // variable para dependencia del UseEffect
  const [bandera, setBandera] = useState(true);

  // Arreglo de gastos por participante para carga dinámica
  const [gastosxpart, crudGastosxpart] = useState([]);

  /**
   * Registra un gasto a un participante
   * @param {Object} esteGasto
   * @param {String} quienGasto
   * @param {Number} cuantoGasto
   *
   * @returns {Boolean} retorna `True` si se insertó un nuevo registro; retorna false si solo se actualizó.
   */
  const registroGastoxPart = (esteGasto, quienGasto, cuantoGasto) => {
    const participanteIndex = gastosxpart.findIndex(
      item => item.nombre === quienGasto,
    );

    // Creamos una copia "profunda" de los gastos para evitar mutar referencias
    const gastosxpartCopy = JSON.parse(JSON.stringify(gastosxpart));

    // Obtener el siguiente ID
    const nextId =
      Math.max(
        ...gastosxpartCopy.map(item => Math.max(...item.data.map(d => d.id))),
      ) + 1;

    // Gasto a registrar
    const gastoObject = {
      id: nextId.toString(),
      fecha: esteGasto.fecha,
      monto_abonado: cuantoGasto,
      concepto: esteGasto.detalle,
      observ: '',
    };

    // Si el index es mayor o igual a 0, significa que actualizaremos un registro y
    // de lo contrario, insertaremos uno nuevo.
    if (participanteIndex >= 0) {
      // Actualizamos el registro
      gastosxpartCopy[participanteIndex].data.push(gastoObject);
    } else {
      gastosxpartCopy.push({
        nombre: quienGasto,
        data: [gastoObject],
      });
    }

    // Actualizamos los gastos
    crudGastosxpart(gastosxpartCopy);

    return participanteIndex < 0;
  };

  /**
   * Normaliza los datos predefinidos
   * agrupando los participantes con sus gastos.
   *
   * Time complexity:  O(n * b)
   * @returns {Array} Colleción de datos normalizados.
   */
  const contabilizarGastos = () => {
    const output = [];

    for (let i = 0; i < participantes.length; i++) {
      const participante = participantes[i];

      const gastosDelParticipante = gastos.filter(
        gasto => gasto.quien_pago === participante.nombre,
      );

      output.push({
        nombre: participante.nombre,
        data: gastosDelParticipante.map(item => ({
          id: item.id,
          fecha: item.fecha,
          monto_abonado: item.monto,
          concepto: item.detalle,
          observ: item.observ,
        })),
      });
    }
    return output;
  };

  useEffect(() => {
    if (bandera) {
      // Insertar datos iniciales.
      crudGastosxpart(contabilizarGastos());
      setBandera(!bandera);
    }
    console.log(
      'Arreglo gastos x participante actualizado',
      JSON.stringify(gastosxpart, null, 2),
    );
  }, [bandera, gastosxpart]);

  /**
   * Simulación de registro.
   */
  const onSubmit = () => {
    registroGastoxPart({fecha, detalle}, nombre, monto);

    setNombre(null);
    setDetalle(null);
    setMonto(null);
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1}}>
        <SectionList
          renderSectionHeader={({section}) => (
            <View>
              <Text>{section.nombre}</Text>
            </View>
          )}
          renderItem={({item}) => (
            <View>
              <Text>
                {' '}
                {item.concepto} --`{'>'}` ${item.monto_abonado}
              </Text>
            </View>
          )}
          sections={gastosxpart}
          keyExtractor={item => item.id}
        />

        <View style={{width: '100%', height: 2, backgroundColor: '#000000'}} />
        <KeyboardAvoidingView style={{flex: 1}} behavior="padding">
          <TextInput
            value={nombre}
            onChangeText={setNombre}
            placeholder="Nombre"
            style={{borderWidth: 1, borderColor: '#000000'}}
          />
          <TextInput
            value={detalle}
            onChangeText={setDetalle}
            placeholder="Detalle"
            style={{borderWidth: 1, borderColor: '#000000'}}
          />
          <TextInput
            value={fecha}
            onChangeText={setFecha}
            placeholder="Fecha (DD/MM/YYYY)"
            style={{borderWidth: 1, borderColor: '#000000'}}
          />
          <TextInput
            value={monto}
            onChangeText={setMonto}
            placeholder="Monto"
            style={{borderWidth: 1, borderColor: '#000000'}}
          />
          <TouchableOpacity
            onPress={onSubmit}
            style={{
              marginVertical: 10,
              borderWidth: 1,
              borderColor: '#000000',
              backgroundColor: '#f2f2f2',
              alignItems: 'center',
            }}>
            <Text>Registrar</Text>
          </TouchableOpacity>
        </KeyboardAvoidingView>
      </View>
    </SafeAreaView>
  );
}

// =====
// DATA
// =====

// Arreglo de gastos generales
const gastos = [
  {
    id: '1',
    fecha: '25/03/21',
    detalle: 'gasolina',
    monto: '1000',
    quien_pago: 'Raúl',
    observ: '',
  },
  {
    id: '2',
    fecha: '19/03/21',
    detalle: 'verduras',
    monto: '500',
    quien_pago: 'Karina',
    observ: '',
  },
  {
    id: '3',
    fecha: '19/03/21',
    detalle: 'bebidas',
    monto: '1100',
    quien_pago: 'Karina',
    observ: '',
  },
  {
    id: '4',
    fecha: '21/03/21',
    detalle: 'helado',
    monto: '700',
    quien_pago: 'Marisa',
    observ: '2 kg',
  },
  {
    id: '5',
    fecha: '27/03/21',
    detalle: 'obsequios',
    monto: '2500',
    quien_pago: 'Raúl',
    observ: '',
  },
];

// Arreglo de participantes
const participantes = [
  {id: '1', nombre: 'Raúl', din_entre: '0', observ: ''},
  {id: '2', nombre: 'Karina', din_entre: '0', observ: ''},
  {id: '3', nombre: 'Marisa', din_entre: '0', observ: ''},
];

Nota: Añadí algunos componentes y variables extra para probar el registro vía formulario.

Capturas

introducir la descripción de la imagen aquí

0

Comparto la solución adaptada a mi problema, partiendo del código y explicación gentilmente aportado por @joseNoriega. Se omitió el formulario, aunque funciona perfectamente, por tratarse de sólo la creación de una SectionList. El manejo de los arreglos de participantes y gastos será realizado en otro módulo de la App.

import React, { useState, useEffect  } from 'react';
import { Text, View, SectionList } from 'react-native';

const EjemploSectionList = () => {

    // variable para dependencia del UseEffect
    const [bandera, setBandera] = useState(true);

    // Arreglo de gastos por participante para carga dinámica
    const [gastosxpart, crudGastosxpart] = useState([]);

    const contabilizarGastos = () => {
        const output = [];
    
        for (let i = 0; i < participantes.length; i++) {
          const participante = participantes[i];
    
          const gastosDelParticipante = gastos.filter(
            gasto => gasto.quien_pago === participante.nombre,
          );
    
          output.push({
            nombre: participante.nombre,
            data: gastosDelParticipante.map(item => ({
              id: item.id,
              fecha: item.fecha,
              monto_abonado: item.monto,
              concepto: item.detalle,
              observ: item.observ,
            })),
          });
        }
        return output;
    };
    
    useEffect(() => {
        if (bandera) {
          // Insertar datos iniciales.
          crudGastosxpart(contabilizarGastos());
          setBandera(!bandera);
        }
        console.log(
          'Arreglo gastos x participante actualizado',
          JSON.stringify(gastosxpart, null, 2),
        );
    }, [bandera]);

    return (
        <View>
            <SectionList
                renderSectionHeader={({section}) => <View><Text>{section.nombre}</Text></View>}
                renderItem={({item}) => <View><Text> {item.concepto} --{'>'} ${item.monto_abonado}</Text></View>}
                sections={gastosxpart}
                keyExtractor={(item) => item.id}
            />
        </View>
    );
}

// =====
// DATA
// =====

// Arreglo de participantes predefinido para el ejemplo
const participantes = [
    { id:"1", nombre: "Raúl", din_entre: "0", observ: "" },
    { id:"2", nombre: "Karina", din_entre: "0", observ: "" },
    { id:"3", nombre: "Marisa", din_entre: "0", observ: "" }
];

// Arreglo de gastos generales predefinido para el ejemplo
const gastos = [
    { id:"1", fecha: "25/03/21", detalle: "gasolina", monto: "1000", quien_pago: "Raúl", observ: "" },
    { id:"2", fecha: "19/03/21", detalle: "verduras", monto: "500", quien_pago: "Karina", observ: "" },
    { id:"3", fecha: "19/03/21", detalle: "bebidas",  monto: "1100", quien_pago: "Karina", observ: "" },
    { id:"4", fecha: "21/03/21", detalle: "helado", monto: "700", quien_pago: "Marisa", observ: "2 kg" },
    { id:"5", fecha: "27/03/21", detalle: "obsequios", monto: "2500", quien_pago: "Raúl", observ: "" },
];

export default EjemploSectionList;

Salida agrupada por nombre de participante

introducir la descripción de la imagen aquí

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.