0
220
ViewsReaccionar recuperación de datos asíncrona en useEffect
Estoy tratando de cargar datos a través de un método asíncrono en useEffect. Paso todas las dependencias necesarias y, según tengo entendido, useEffect debería funcionar cuando se monta el componente, en el primer renderizado y cuando cambian las dependencias.
useEffect(() => { console.log('effect') if (ids.length === 0) { api.images.all().then((data) => { console.log(data); setIDs(data) }).catch(console.log) } }, [ids])En mi caso, son 3 veces: montar (debería cargar los datos inmediatamente), primero renderizar (no debería entrar en si) y debido al cambio de ID (tampoco debería entrar en si). Pero useEffect dispara 4 veces y carga datos dos veces, no puedo entender por qué.
Código de componente:
//BuildIn import { useEffect, useState } from 'react' //Inside import api from '../services/api.service' import AsyncImage from '../components/AsyncImage.component' const ImagesPage = () => { const [ids, setIDs] = useState([]) useEffect(() => { console.log('effect') if (ids.length === 0) { api.images.all().then((data) => { console.log(data); setIDs(data) }).catch(console.log) } }, [ids]) return( <> {(ids.length > 0) ? ids.map((id, index) => <AsyncImage guid={id} key={index} />) : <div>No data</div>} </> ) } export default ImagesPage2 answers
Answer question0
He vuelto a implementar la lógica empresarial de su ejemplo y funciona bien. Lo único que tienes que arreglar es pasar los setIDs al useEffect como una dependencia. El componente se renderiza dos veces, lo cual está bien; el primero es el renderizado inicial y el segundo ocurre cuando los datos están presentes.
Incluso puedes deshacerte de la condición if. Simplemente no pase la id al gancho useEffect y obtendrá las imágenes solo en el montaje.
// import { useState, useEffect } from 'react' --> with babel import const { useState, useEffect } = React // --> with inline script tag const api = { images: { all: () => new Promise(res => res(['id1', 'id2'])) } } const ImagesPage = () => { const [ids, setIDs] = useState([]) useEffect(() => { api.images.all() .then(data => { setIDs(data) }) .catch(console.log) }, [setIDs]) return( <ul> {console.log('reders')} {ids.map(id => <li key={id}>{id}</li>)} </ul> ) } ReactDOM.render(<ImagesPage />, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script> <div id="root"></div>0
intenta hacer esto:
useEffect(() => { async function fetchData() { const res = await loadMovies(); setIDs(res) } fetchData(); }, []);