function Groups() { const [gamesD, setGames] = useState([]); const notInitialRender = useRef(false); useEffect(() => { const gamesArray = []; const groups = [ 'EURO Grp. A', 'EURO Grp. B', 'EURO Grp. C', 'EURO Grp. D', 'EURO Grp. E', 'EURO Grp. F', ]; const instance = axios.create({ baseURL: server }); for (let i = 0; i < groups.length; i++) { const fetchGame = async () => { const response = await instance.get(`Euro_events?grp=${groups[i]}`); gamesArray.push(response.data); }; fetchGame().then(setGames(gamesArray)); } }, []); useEffect(() => { if (notInitialRender.current) { const timer = setTimeout(() => { console.log(gamesD[0][0].eventname); }, 100); return () => clearTimeout(timer); } else { notInitialRender.current = true; } }, [gamesD]); function logEventsArray(el) { console.log('games'); } }Así que estoy obteniendo datos de mi base de datos para cada elemento en los grupos de matrices y luego quiero mapear estos datos (dos veces porque es una matriz dentro de una matriz) en la parte jsx del componente. Sin embargo, el problema es que el estado se cambia "demasiado tarde". Supongo que esto se debe a que el registro de la consola no muestra los datos que se envían a gamesArray a menos que ponga un tiempo de espera. Sin embargo, el tiempo de espera no funciona porque la parte jsx no se mapea a través de nada. Console.log (juegos) solo muestra los datos si se cambia algún código en el código vs después de que el sitio se haya renderizado.
¿Algún consejo?
Intenta usar un gancho personalizado para buscar todos tus juegos.
A continuación, puede utilizar los datos una vez que se hayan obtenido todos:
const useGetGames = () => { const [gamesArray, setGamesArray] = useState([]); const [loading, setLoading] = useState(true); const groups = [ 'EURO Grp. A', 'EURO Grp. B', 'EURO Grp. C', 'EURO Grp. D', 'EURO Grp. E', 'EURO Grp. F', ]; const instance = axios.create({ baseURL: server }); const fetchGames = () => { try { for (let i = 0; i < groups.length; i++) { const { data } = await instance.get(`Euro_events?grp=${group}`); setGamesArray((games) => [...games, ...data]); } } catch (err) { console.log(err); } setLoading(false); }; useEffect(() => { fetchGames(); }, []); return { loading, gamesArray }; };Luego recupere los datos usando:
const { loading, gamesArray } = useGetGames() if (!loading) { // All data should be available console.log(gamesArray) }