Me gustaría llamar a una función asíncrona y obtener el resultado de mi UseEffect.
Los ejemplos de fetch api que encontré en Internet se realizan directamente en la función useEffect. Si mi URL cambia, debo parchear todas mis búsquedas.
Cuando lo intenté, recibí un mensaje de error.
Este es mi código.
async function getData(userId) { const data = await axios.get(`http://url/api/data/${userId}`) .then(promise => { return promise.data; }) .catch(e => { console.error(e); }) return data; } function blabla() { const [data, setData] = useState(null); useEffect(async () => { setData(getData(1)) }, []); return ( <div> this is the {data["name"]} </div> ); }index.js:1375 Advertencia: una función de efecto no debe devolver nada más que una función, que se usa para la limpieza. Parece que escribiste useEffect(async () => ...) o devolviste una Promesa. En su lugar, escribe la función asíncrona dentro de tu efecto y llámala inmediatamente:
useEffect(() => { async function fetchData() { // You can await here const response = await MyAPI.getData(someId); // ... } fetchData(); }, [someId]); // Or [] if effect doesn't need props or stateCree una función asíncrona dentro de su efecto que espere el getData(1) y luego llame a setData() :
useEffect(() => { const fetchData = async () => { const data = await getData(1); setData(data); } fetchData(); }, []);Si lo está invocando de inmediato, es posible que desee usarlo como una función anónima:
useEffect(() => { (async () => { const data = await getData(1); setData(data); })(); }, []);Sería mejor si hiciera lo que sugiere la advertencia: llame a la función asíncrona dentro del efecto.
function blabla() { const [data, setData] = useState(null); useEffect(() => { axios.get(`http://url/api/data/1`) .then(result => { setData(result.data); }) .catch(console.error) }, []); return ( <div> this is the {data["name"]} </div> ); }Si desea mantener la función api fuera del componente, también puede hacer esto:
async function getData(userId) { const data = await axios.get(`http://url/api/data/${userId}`) .then(promise => { return promise.data; }) .catch(e => { console.error(e); }) return data; } function blabla() { const [data, setData] = useState(null); useEffect(() => { (async () => { const newData = await getData(1); setData(newData); })(); }, []); return ( <div> this is the {data["name"]} </div> ); }