react repeat request multiple time-CodePudding

I am building a react component but when rendering the component

the request done two times even if the first request success

import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router';
import Post from './Post'


export const SinglePost = () => {

   const { id } = useParams();
   const getData =  async() => {
         await axios.get(`post/${id}`)
        .then((response)=>{
            return response.data
        })
        .catch((err)=>{
            return err
        })
}



return <Post post = {getData()} />


}

is there a common way to fix it

thanks

here my index.tsx

  const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
   );

  root.render(

  <Provider store ={store}>

     <App />
  </Provider>
  );

the error happens I think when passing the result to Post component even in that component the request to that url never made

CodePudding user response：

It may have something to do with React.StrictMode. If you remove this it should only render once.

I believe that this only happens in development, it production, this wouldn't happen but I may be wrong.

CodePudding user response：

This is due to React Strict mode, and it only happens in development. It's enabled by default for your whole react app. If you wish to remove it, go to your index.js and remove the tags <React.StrictMode> wrapping your app.