How to call an async function inside a UseEffect() in React?
Create an async function inside your effect that wait the getData(1)
result then call setData()
:
useEffect(() => { const fetchData = async () => { const data = await getData(1); setData(data); } fetchData();}, []);
If you're invoking it right-away you might want to use it as an anonymous function:
useEffect(() => { (async () => { const data = await getData(1); setData(data); })();}, []);
It would be best if you did what the warning suggests - call the async function inside the effect.
function blabla() { const [data, setData] = useState(null); useEffect(() => { axios.get(`http://url/api/data/1`) .then(result => { setData(result.data); }) .catch(console.error) }, [setData]); return ( <div> this is the {data["name"]} </div> );}