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.

Recorriendo JSON y añadiendo al arreglo, pero evitando múltiples adiciones al arreglo.

12 Jul, 2023 Programación

Cuál es la mejor manera de iterar a través de una respuesta en JSON e insertar elementos específicos del elemento JSON en un arreglo (asumiendo que estoy usando React hooks). Este es mi intento, pero el problema es que la primera vez que ejecuto la función, no obtengo ninguna salida, la segunda vez obtengo la salida deseada, y luego las ejecuciones subsiguientes siguen agregando al arreglo datelist (el tamaño se duplica cada vez).

const get = () => {
    fetch('/test')  
        .then(response => response.json())
        .then(data => {setDates(data)})
    setDatelist([]);
    setDatelist(datelist => [...datelist, dates.map(date => date.start["dateTime"])]);
    console.log(datelist);  
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código proporcionado es que la función setDates dentro del bloque then es asíncrona, lo que significa que dates no se actualizará inmediatamente después de la llamada fetch. Por lo tanto, dates seguirá siendo un array vacío cuando se use en la función setDatelist.

    Para solucionar este problema, puedes mover la función setDatelist dentro del bloque then después de setDates para asegurarte de que dates se haya actualizado con los datos obtenidos. Además, para insertar elementos específicos de cada elemento JSON en un array, puedes usar la función map en el array data en lugar del array dates.

    Aquí tienes una versión actualizada del código que debería funcionar:

    const get = () => {
  fetch('/test')
    .then(response => response.json())
    .then(data => {
      setDates(data);
      const dateList = data.map(date => date.start["dateTime"]);
      setDatelist(dateList);
      console.log(dateList);
    });
};

    En este código actualizado, data.map(date => date.start["dateTime"]) crea un nuevo array que contiene solo la propiedad start["dateTime"] de cada elemento JSON en el array data obtenido. Este nuevo array se almacena en la variable dateList y se pasa inmediatamente a la función setDatelist para actualizar el estado del componente con los nuevos datos. La llamada console.log(dateList) imprime el nuevo array dateList en la consola con fines de depuración.

Comments are closed.