Tengo este código que usa promesas, pero mi problema es cuando consola. registro la respuesta, la imprime 2 veces, ¿por qué? ¿Alguien puede señalarme en la dirección correcta? ¡gracias de antemano!
import "./App.css"; import { useState } from "react"; function App() { const [data, setData] = useState([]); let itemsApi = new Promise(function (resolve, reject) { setTimeout(() => { resolve([ { grupoId: 1, name: "test1" }, { grupoId: 2, name: "test2" }, { grupoId: 1, name: "test3" } ]); }, 500); }); itemsApi .then((res) => { console.log(res); // This gets call 2 times, why?? }) .catch((error) => {}); return <div>test</div>; } export default App;React es libre de llamar a la función de su componente tantas veces como desee (y, de hecho, en modo estricto generalmente lo llama dos veces, para asegurarse de que no está haciendo cosas malas con efectos secundarios, como lo está haciendo ahora).
Aquí hay un ejemplo de cómo hacer correctamente la carga de datos asíncronos usando useEffect .
loadData aquí es solo una función simulada que tarda 500 milisegundos en devolver datos, pero también podría ser cualquier otra cosa.
function delay(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } async function loadItems() { const data = [ { grupoId: 1, name: "test1" }, { grupoId: 2, name: "test2" }, { grupoId: 1, name: "test3" }, { grupoId: 1, name: "test4" }, { grupoId: 3, name: "test5" }, { grupoId: 2, name: "test6" }, ]; await delay(500); return data; } function App() { const [data, setData] = useState([]); React.useEffect(() => { loadItems().then(setData); }, []); // <- empty dependency array has this effect only run once return <div>{JSON.stringify(data)}</div>; } export default App;