Axios.post sends request two times

Question

I have a problem with axios.post sending two times the same request with the same body. I have tried to Google the problem but find nothing. How can I fix it?

App.js

import logo from './logo.svg';
import './App.css';
import Register from "./register";
import SendToken from "./sendToken";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import Confirmation from "./Confirmation";

import {useParams} from "react-router-dom";

function App() {
  return (
      <BrowserRouter>
          <div>
              <Routes>
                  <Route path="/registration" element={<Register/>}/>
                  <Route path="/confirmation" element={<Confirmation/>}/>
                  <Route path="/account/registrationConfirm/:data" element={<SendToken/>}/>
              </Routes>
          </div>
      </BrowserRouter>

  );
}

export default App;

sendToken.js

import axios from 'axios';

const SendToken = () => {
    let parts = window.location.href.split('/');
    let length = parts.length;
    let token = parts[length - 1] == '' ? parts[length - 2] : parts[length - 1]

    axios.post("http://localhost:8080/api/v1/registration/registrationConfirm", {token}).then((data) => {
        console.log(data.status)
        console.log(data.data)
        console.log(token);
        }
    }).catch(() => {
        alert("An error occurred on the server")
    })

    return (
        <div>
            Token send
        </div>
    )
}

export default SendToken;

maybe components rerendering. Can you tell me where you are using that route for ```SendToken``` — Muhammad Bilal Bangash, Feb 12 '22 at 07:31
Does this answer your question? [React calling a method on load only once](https://stackoverflow.com/questions/58101018/react-calling-a-method-on-load-only-once) — Anurag Srivastava, Feb 12 '22 at 07:34
All side effects (including API calls) must be wrapped with React.useEffect hook. That is the obligatory rule. — Artyom Ganev, Mar 16 '22 at 08:07

score 4 · Accepted Answer · edited Feb 12 '22 at 07:41

when you use to send request like this everytime that page rerenders it sends the request try using useEffect:

useEffect(() => {
    axios
    .post("http://localhost:8080/api/v1/registration/registrationConfirm", {token})
    .then((data) => {
        console.log(data.status)
        console.log(data.data)
        console.log(token);
    })
    .catch(() => {
        alert("An error occurred on the server")
    })
},[]}

the second parameter tells you that this code will run only one time.

score 1 · Answer 2 · answered Feb 12 '22 at 07:40

1

You might need to use useEffect() with a second argument as an empty array in your SendToken component.

import {useEffect} from "react";

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

To make sure that it runs only once.

answered Feb 12 '22 at 07:40

Mohammed Sobhi

83
4

Axios.post sends request two times

2 Answers2