React - API call running multiple times-CodePudding

I'm writing a react app that fetches data from two different APIs. In the code below, I call the two APIs then console.log the response. After npm start, in the console, I see that the response has been console.logged a few times. I don't know why it's doing this and it's causing issue with the app's behavior. It's receiving the data from aws dynamoDB tables.

function App() {
  const [ response , setResponse ] = useState();
  const [ btnText , setbtnText ] = useState('Get Data');
  const [ details , setDetails ] = useState();
  
async function fetchData() {
  try {
    await fetch('url hidden' , {
      method: 'POST',
      header: {'Content-Type': 'application/json'},
    }).then(res => res.json())
      .then(res => setResponse(res))

    await fetch('url hidden' , {
      method: 'POST',
      header: {'Content-Type': 'application/json'},
    }).then(res => res.json())
      .then(res => setDetails(res))

  } catch (error) {
    console.log(error);
  };
}
  console.log(response)

  return (
    <div className="container">
      <header className='header'>
        <button onClick={fetchData}>{btnText}</button>
      </header>
      <Summary response={response} details={details} />
    </div>
  );
}

I also tried useEffect to fetch data as soon as app loads, but it's doing the same thing.

  useEffect(() => {
    try {
      Promise.all([
        fetch('url hidden' , {
          method: 'POST',
          header: {'Content-Type': 'application/json'},
        }).then(res => res.json()).then(res => setResponse(res)),
        
        fetch('url hidden' , {
          method: 'POST',
          header: {'Content-Type': 'application/json'},
        }).then(res => res.json()).then(res => setDetails(res)),
      ]);    
    }
    catch(err) {
      console.log(err);
    }
  } , [])

this image shows the response after clicking the button only once

CodePudding user response：

If you move console.log(response) inside fetchData then you will get exact information about how many times handler executes, and it really should be only once, on click. With your approach you moved log in component body and this will cause log to execute each time element rerenders - probably 3 times: one log initially when element is loaded in DOM, and other 2 when you set states inside handler.

CodePudding user response：

When you use console.log in the the functional component you will get that console.log each time the component rerenders. And that happens for example each time you set a new state. You could just move the console.log inside the fetch function.

Or you just console.log the values in useEffect if they change. Like in the example below.

I also refactored the fetchData function to use async await and Promise.all more efficient.

Also you were missing an "s" for "headers" for the fetch method.

 async function fetchData() {
   try {
    const [response, details] = await Promise.all([
      (
        await fetch("url hidden", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
        })
      ).json(),
      (
        await fetch("url hidden", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
        })
      ).json(),
    ]);

    setResponse(response);
    setDetails(details);
  } catch (error) {
    console.log(error);
  }
}

useEffect(() => {
  fetchData();
}, []);

useEffect(() => {
  console.log(response, details);
}, [response, details]);