¿Cómo llamar a una función asíncrona dentro de useEffect() en React?

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 state

Cree una función asíncrona dentro de su efecto que espere el getData(1) resultado luego llamar 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>
        );
    }

Desde getData devuelve una Promesa, podrías simplemente usar .then. En su caso, esto es mucho más simple que escribir una función asíncrona y llamarla directamente.

Además, desde axios.get ya devuelve una Promesa, tu getData la función no necesita ser marcada async. Esta es una versión simplificada y funcional de su código:

function getData(userId) {
    return axios.get(`http://url/api/data/${userId}`)
        .then(promise => promise.data)
        .catch(e => {
            console.error(e);
        });
}


function blabla() {
    const [data, setData] = useState(null);

    useEffect(async () => {
        getData(1).then(setData);
    }, []);

    return (
        <div>
            this is the {data["name"]}
        </div>
    );
}

El componente puede desmontarse o volver a renderizarse con diferentes someId antes de que se resuelva await:

const unmountedRef = useRef(false);
useEffect(()=>()=>(unmountedRef.current = true), []);

useEffect(() => {
  const effectStale = false; // Don't forget ; on the line before self-invoking functions
  (async function() {
    // You can await here
    const response = await MyAPI.getData(someId);

    /* Component has been unmounted. Stop to avoid
       "Warning: Can't perform a React state update on an unmounted component." */
    if(unmountedRef.current) return;

    /* Component has re-rendered with different someId value
       Stop to avoid updating state with stale response */
    if(effectStale) return;

    // ... update component state
  })();
  return ()=>(effectStale = true);
}, [someId]);

Considere usar Suspenso para los datos que deben cargarse antes de montar el componente.

Todavía puede definir la función asíncrona fuera del gancho y llamarla dentro del gancho.

const fetchData = async () => {
   const data = await getData(1);
   setData(data);
}

useEffect(() => {
  fetchData();
}, []);