axios post 发送了两次请求

Question

我正在尝试向服务器发送一些数据，但我的请求被发送了两次，我已经阅读了一些 Whosebug 问题和答案，但无法弄清楚我的代码有什么问题，Screenshot，请帮助我，如果您需要一些细节，我会很乐意提供一些细节，抱歉英语不好

import React from "react";
import "./App.css";
import { Route, Routes } from "react-router-dom";
import axios from "axios";
import Login from "./components/Login/login";
import Sidebar from "./components/Sidebar/sidebar";
import Dashboard from "./components/Dashboard/dashboard";
import Goods from "./components/Goods/goods";
import Sales from "./components/Sales/sales";
import Users from "./components/Users/users";

function App() {
const token = localStorage.getItem("token");

if (token) {
    axios
        .post("http://localhost:3100/admin/checkToken", {
            token: token,
        })
        .then((res) => {
            console.log(res);
        });

    return (
        <div className="App">
            <Sidebar />
            <Routes>
                <Route path="/" element={<Dashboard />} />
                <Route path="/goods" element={<Goods />} />
                <Route path="/sales" element={<Sales />} />
                <Route path="/users" element={<Users />} />
            </Routes>
        </div>
    );
} else {
    return (
        <div className="App">
            <Login />
        </div>
    );
}
}

export default App;

Answer 1

看起来您应该将 API 调用包装到 componentDidMount 生命周期方法。像那样：

import React, { useEffect } from "react";
import "./App.css";
import { Route, Routes } from "react-router-dom";
import axios from "axios";
import Login from "./components/Login/login";
import Sidebar from "./components/Sidebar/sidebar";
import Dashboard from "./components/Dashboard/dashboard";
import Goods from "./components/Goods/goods";
import Sales from "./components/Sales/sales";
import Users from "./components/Users/users";

function Foo() {
  if (!localStorage.getItem("token")) return <Login />;

  return <Bar />;
}

function Bar() {
  useEffect(() => {
    axios
        .post("http://localhost:3100/admin/checkToken", {
            token: localStorage.getItem("token"),
        })
        .then((res) => {
            console.log(res);
        });
  }, []);

  return (
    <div className="App">
        <Sidebar />
        <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/goods" element={<Goods />} />
            <Route path="/sales" element={<Sales />} />
            <Route path="/users" element={<Users />} />
        </Routes>
    </div>
  );
}

export default Foo;

阅读 docs 中有关组件生命周期的更多信息。

axios post 发送了两次请求

axios post sent request twice

reactjs

axios