How do I use a fetch get response more than once?-CodePudding

I want to set both of these values in the state to be used later as variables.

  const [dollarGoal, setDollarGoal] = React.useState(0); 
  const [dollarValue, setDollarValue] = React.useState(0);
  //fetching donation value
  fetch('api', {
      method: 'GET',
    })
    .then(response => response.json())
    .then(r => setDollarValue(r.dollarValue))
    .then(r => setDollarGoal(r.dollarGoal));

But it gives the error:

Property 'dollarGoal' does not exist on type 'void'.

How do I fix this?

CodePudding user response：

Try this:

  fetch('api', {
      method: 'GET',
    })
    .then(response => response.json())
    .then((r) => {
      setDollarValue(r.dollarValue)
      setDollarGoal(r.dollarGoal)
    });

The last two .then statements need to be combined. By calling .then twice, you're sending the result of setDollarValue() (a void function) to the next .then, which is not what you want.

CodePudding user response：

First off i think you should place your api call inside of a useEffect hook, because if not the fetch will be triggered again right after you set the values of your response with your useState hook, it might lead to an infinite call when it will be working. Then, i think your response might not contain the property named 'dollarValue'. Have you tried console.log your response ?