En teoría, la matriz debe completarse continuamente y debe reflejarse en la representación de la página, pero en lugar de eso, se sobrescribe. terminando con una lista que tiene solo el último valor agregado.
Esta es una versión reducida de lo que estoy tratando de obtener.
// Just a function to simulate fetching data from an API async function getData(id) { // Simulate Delay await new Promise((r) => setTimeout(r, id * 1000)); return `Data ${id}`; } function App(props) { const [data, setData] = React.useState("Loading..."); const [arr, setArr] = React.useState([]); React.useEffect(() => { getData(0).then(setData); }, []); React.useEffect(() => { if (data && arr.length == 0) { for (let i = 1; i < 6; i++) { getData(i).then((resolve) => { setArr([resolve, ...arr]); }); } } else { setArr([]); } }, [data]); return ( <> <h3>{data}</h3> <ul> {arr.map((item) => ( <li key={item}>{item}</li> ))} </ul> </> ); }Datos 0
Datos 0
Después de investigar, descubrí que podía pasar una función a setState() en forma de (currentStateValue) => {} . Para evitar que los datos se llamen dos veces debido a que el segundo useEffect se activa dos veces, cree otro estado isFetchingMoreData para verificar.
// Just a function to simulate fetching data from an API async function getData(id) { // Simulate Delay await new Promise((r) => setTimeout(r, id * 1000)); return `Data ${id}`; } function App(props) { const [data, setData] = React.useState("Loading..."); const [arr, setArr] = React.useState([]); const [isFecthingMoreData, setIsFecthingMoreData] = React.useState(false); React.useEffect(() => { getData(0).then(setData); setIsFecthingMoreData(true); }, []); React.useEffect(() => { if (isFecthingMoreData) { setIsFecthingMoreData(false); for (let i = 1; i < 6; i++) getData(i).then((resolve) => { setArr((prev )=>[...prev, resolve]); }); } else { setArr([]); } }, [data]); return ( <> <h3>{data}</h3> <ul> {arr.map((item) => ( <li key={item}>{item}</li> ))} </ul> </> ); }