How to set state after data was fetched

Question

I fetch data and want to set state with newly received data. I have a special function for data fetching (loadData) and a component(App) where I have to setState. However, I can't pass there data from loadData. When I write const res = loadData(), I get Pending...

async function loadData() {
    let query = `someQuery`;

    let url = 'someUrl',
    options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            query     
        })
    };

const response = await fetch(url, options);
const body = await response.json();
return body.data   // I have to set this data to state
}

const App = () => {
const [state, setState] = useState([])

useEffect(() => {
      loadData(); // here I would like to setState. How to pass in here data 
      received as a result 
          of loadData?
    }, [])
}

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Emile Bergeron, Jan 04 '21 at 20:12

score 2 · Accepted Answer · answered Jan 04 '21 at 18:32

Of course you get Pending..., because it's a Promise.

What do you do with a Promise?
You can append .then(response => ...) to it in this case, because you can't await inside useEffect:

useEffect(() => {  
      loadData()  
          .then(response => setState(response.data.results));  
    }, [])

Velrin Black · Answer 2 · 2021-01-05T05:25:55.983

-1

loadData is an async function. That means, it returns Promise. In this case, you have to do await loadData() to access its result. Because function in useEffect can't be async, you have to wrap it in another function like this:

const App = () => {
    const [state, setState] = useState([])

    useEffect(() => {
        const wrappingFuncion = async () => {
            const res = await loadData();
            setState(res);
        }
        wrappingFunction();
    }, [])
}

edited Jan 05 '21 at 05:25

answered Jan 04 '21 at 18:28

Velrin Black

412
1
4
10

You can't do that inside `useEffect` – Ergis Jan 04 '21 at 18:29
Yes, not directly, but you can create an `async` wrapper function in it. – Velrin Black Jan 04 '21 at 18:46
Yes, I know, but the person asking for help doesn't. So you can edit your answer to provide it. – Ergis Jan 04 '21 at 18:48
...and now you're not calling the wrapping function. See how `async/await` is unhelpful inside `useEffect`? – Emile Bergeron Jan 04 '21 at 20:10

How to set state after data was fetched

2 Answers2