CODEWITHSUNDEEP
javascriptreactjsreact-hooksuse-state
Abhi
Abhi

Reputation: 13

Not able to use useState in the default app function

I am very new to React and I was trying to use the useState hook to store a request that returns json data in the form :

[{"_id":"622fff9046722bfbaace77d1","Country":"United States","CoronavirusCases":81216268,"Deaths":991038,"Recovered":56282006},{"_id":"622fff9846722bfbaace789f","Country":"United Kingdom","CoronavirusCases":19700952,"Deaths":162873,"Recovered":18378375},{"_id":"622fff9846722bfbaace78a0","Country":"Brazil","CoronavirusCases":29382196,"Deaths":655326,"Recovered":27838793},{"_id":"622fff9846722bfbaace78a4","Country":"France","CoronavirusCases":23532997,"Deaths":140294,"Recovered":15867601},{"_id":"622fff9846722bfbaace78a5","Country":"India","CoronavirusCases":42995560,"Deaths":516005,"Recovered":42441449}]

I'm using this functional component to return the data:

export const FetchCovidData = () => {

  return axios.get('http://localhost:5000/country-ex')
  .then(function (response) {
    return response.data;
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
}

This is my App function which should be trying to store the returned JSON into the array CovidData so that I can use it as the dataset for the graphs made using chartJS (which seem to be working fine with sample data I made up in the same format as the returned JSON data) :

export default function App() {
  const [CovidData, setCovidData] = useState([]);

  setCovidData(FetchCovidData());
  console.log(CovidData);
  return (

    <div className="App">
    
    <div className='block1'>
      <h1 className='head'>Covid-19</h1>  
      <br></br>
      <br></br>
      <br></br>
      <br></br>
      <br></br>
    </div>  

    <div className='block2'>
      <div className="bar" style={{width:500}}>
        <BarChart ChartData={ CovidData }/>
      </div>
      <br></br>
      <br></br>
      <br></br>
      <div className="pie" style={{width:500}}>
        <PieChart ChartData={ CovidData }/>
      </div>
      <br></br>
      <br></br>
      <br></br>
      <div className="doughnut" style={{width:500}}>
        <DoughnutChart ChartData={ CovidData }/>
      </div>
      <br></br>
      <br></br>
      <br></br>
      <div className="combined" style={{width:500}}>
        <CombinedChart ChartData={ CovidData }/>
      </div>
    </div>

    </div>
  );
}

When I look at the console on the website it tells shows me the link to a react error page titled "Invalid Hook Call Warning" pointing to the line where I'm defining the useState for CovidData. I checked that my react and react-dom were the same version. It also seems that using my hook at the top of the function which should be the right way of doing it. I have looked at other posts addressing the same error as me but I found them very difficult to understand and a lot more complicated compared to my situation. I would appreciate any help on this.

Upvotes: 0

Views: 125

Answers (1)

Thanh Th&#225;i
Thanh Th&#225;i

Reputation: 31

The problem is when you call setCovidData, the component will rerender, and after rerender, it call setCovidData, again and again. So we just setCovidData once when the component render the first time or set when we want to. So that, add a useEffect to do it, it's like componentDidMount.

useEffect(() => {
  setCovidData(FetchCovidData())
}, [])

And the func u can try

export const FetchCovidData = async () => {
  try {
    const response = await axios.get('http://localhost:5000/country-ex')
    return response?.data || []
  } catch (error) {
    console.log('error', error)
  }
}

Or

export const FetchCovidData = async () => {
  return await new Promise((resolve, reject) => {
    axios.get('http://localhost:5000/country-ex')
      .then(res => {
        if (res?.data) resolve(res?.data || [])
        else reject()
      })
      .catch(err) {
        reject(err)
      }
  })
}

Upvotes: 2

Related Questions