Setting React state from JSON data in useEffect

I need to fetch json data and iterate over it, fetching some more json data later, and finally setting React states. I'd like to use a general function to handle all file requests. I'd also like to handle different types of errors (404 and json parsing, mostly).

I've read How to use async functions in useEffect and several other relevant articles, but whatever I try to do outside of my fetchData function, I keep getting only Promises instead of data.

Also, this only needs to be done once, when the main App.js load. Is it good practice to use an Effect for that, or should it be done at the top of the file, before the App component itself (which needs the data)?

  useEffect(() => {
    async function fetchData(url) {
      const response = await fetch(url, {
        headers : { 
          'Content-Type': 'application/json',
          'Accept': 'application/json'
          }
      })
      if (!response.ok) {
        return Promise.reject(`File not found: ${url}`)
      } else {
        const json = await response.json()
          .then(res => { return res })
          .catch(err => { return Promise.reject(`JSON Error (${url}): ${err}`) })
        // I can use "json" here...
      }
    }

    // ...but I need it here
    const json = fetchData('data/initial-data.json')
      .catch(err => console.log('Error ' + err))
    // to iterate over its contents with more calls to fetchData
    for (const item in json) {
      const moreData = fetchData(`data/moredata-${item}.json`)
        .catch(err => console.log(`Error: ${err}`))
      // do something with moreData
      // such as setState
    }
  }, [])

Via Active questions tagged javascript - Stack Overflow https://ift.tt/oRDvpgH