How to retrieve nested JSON data with useEffect hook and async/await in React

Question

I need to integrate with contentful, and am having a difficult time getting the nested JSON data

When i do this, i get the desired result:


  const client = contentful.createClient({
    space: '<space_id>',
    accessToken: '<access_token>'
  });

  useEffect(async () => {
    const response = await client.getEntry(id);
    setHeadLinks(response.fields.slug);
  }, []);

  console.log(headLinks);

I get a warning, though, in the console:

Warning: An effect function must not return anything besides a function, which is used for clean-up.

It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:

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

So when i try it, i get an error message that response is not defined:

useEffect(() => {
    const fetchData = async () => {
      const response = await client.getEntry(id);
    };
    setHeadLinks(response.fields.slug);
    fetchData();
  }, []);

  console.log(headLinks);

Thank you for help

Nicholas Tower Nicholas Tower · Accepted Answer · 2019-07-13T22:18:27

You moved the call to setHeadLinks outside the function, and so the response variable is not in scope. Just need to move it back inside:

useEffect(() => {
  const fetchData = async () => {
    const response = await client.getEntry(id);
    setHeadLinks(response.fields.slug);
  };
  fetchData();
}, []);

How to retrieve nested JSON data with useEffect hook and async/await in React

2 Answers