Tengo un problema con axios.post enviando dos veces la misma solicitud con el mismo cuerpo. He intentado buscar en Google el problema pero no encuentro nada. ¿Cómo puedo arreglarlo?
Aplicación.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;enviarToken.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;cuando usa para enviar una solicitud como esta cada vez que la página se vuelve a mostrar, envía la solicitud, intente usar 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") }) },[]}el segundo parámetro le dice que este código se ejecutará solo una vez.
Es posible que deba usar useEffect() con un segundo argumento como una matriz vacía en su componente SendToken.
import {useEffect} from "react"; useEffect(() => { fetchData(); }, []);Para asegurarse de que se ejecuta sólo una vez.