React 页面不会停止刷新

Question

我最近将我的站点部署到工作测试服务器上。当我在本地构建所有内容时，它似乎工作正常。然而，一旦我继续部署它，该站点现在几乎每秒自动刷新 none 停止。我已经检查了我的代码和我所做的小改动，但似乎无法找到问题的原因以及为什么我们工作 vps 上的网站现在一遍又一遍地刷新。我希望有人可能对此有所了解。我已经在下面发布了我的 App.jsx、index.js 和 Home.jsx。任何对此事的见解将不胜感激。

我还应该注意，我返回并将所有内容移回本地，以查看在将其发送到服务器之前是否有我可能做的事情。看来当我运行在本地时，问题为零。我还在多个浏览器上测试了这个，并请几位同事看了一下，它似乎也在为他们和多个浏览器继续每秒刷新一次

App.jsx

import "./app.scss";
import Home from "./pages/home/Home";
import Register from "./pages/register/Register";
import Watch from "./pages/watch/Watch";
import Login from "./pages/login/Login";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import { useContext } from "react";
import { AuthContext } from "./context/authContext/AuthContext";

const App = () => {
  const { user } = useContext(AuthContext);
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          {user ? <Home /> : <Redirect to="/register" />}
        </Route>
        <Route path="/register">
          {!user ? <Register /> : <Redirect to="/" />}
        </Route>
        <Route path="/login">{!user ? <Login /> : <Redirect to="/" />}</Route>
        {user && (
          <>
            <Route path="/movies">
              <Home type="movie" />
            </Route>
            <Route path="/series">
              <Home type="series" />
            </Route>
            <Route path="/watch">
              <Watch />
            </Route>
          </>
        )}
      </Switch>
    </Router>
  );
};

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { AuthContextProvider } from "./context/authContext/AuthContext";

ReactDOM.render(
  <React.StrictMode>
    <AuthContextProvider>
      <App />
    </AuthContextProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Home.jsx

import Navbar from "../../components/navbar/Navbar";
import Featured from "../../components/featured/Featured";
import "./home.scss";
import List from "../../components/list/List";
import { useEffect, useState } from "react";
import axios from "axios";

const Home = ({ type }) => {
  const [lists, setLists] = useState([]);
  const [genre, setGenre] = useState(null);
  const axiosInstance = axios.create({
    baseURL: process.env.REACT_APP_API_URL,
  });

  useEffect(() => {
    const getRandomLists = async () => {
      try {
        const res = await axiosInstance.get(
          `lists${type ? "?type=" + type : ""}${
            genre ? "&genre=" + genre : ""
          }`,
          {
            headers: {
              token:
                "Bearer " +
                JSON.parse(localStorage.getItem("user")).accessToken,
            },
          }
        );
        setLists(res.data);
      } catch (err) {
        console.log(err);
      }
    };
    getRandomLists();
  }, [type, genre, axiosInstance]);

  return (
    <div className="home">
      <Navbar />
      <Featured type={type} setGenre={setGenre} />
      {lists.map((list) => (
        <List list={list} />
      ))}
    </div>
  );
};

export default Home;

Answer 1

每次渲染都会创建一个新的 axiosInstance，它会触发 useEffect 的变化。

将 axiosInstance 创建移出组件。

const axiosInstance = axios.create({
    baseURL: process.env.REACT_APP_API_URL,
});

const Home = ({ type }) => {
    const [lists, setLists] = useState([]);
    const [genre, setGenre] = useState(null);
    // stuff
};

Answer 2

包含组件的路由是否无限刷新？这是因为每次状态更改时 React Refresh 都会导致组件重新挂载。在您的情况下，您正在创建一个 axios 实例 1) 不仅 不将其存储 在 useState 中（您将其创建为普通变量），2) 而且在每个组件渲染上；

这会导致 React Refresh 变得疯狂。它在本地工作的原因可能与某些 Webpack 相关，但这并不重要，因为无论如何您都应该以不同的方式配置 axios。

解决方案：

为什么不设置对通过应用程序的所有请求通用的默认配置？

import "./app.scss";
import Home from "./pages/home/Home";
import Register from "./pages/register/Register";
import Watch from "./pages/watch/Watch";
import Login from "./pages/login/Login";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import { useEffect, useContext } from "react";
import { AuthContext } from "./context/authContext/AuthContext";

const App = () => {
  useEffect( () => {
    axios.defaults.baseURL = process.env.REACT_APP_API_URL;
  }, [] )
  const { user } = useContext(AuthContext);
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          {user ? <Home /> : <Redirect to="/register" />}
        </Route>
        <Route path="/register">
          {!user ? <Register /> : <Redirect to="/" />}
        </Route>
        <Route path="/login">{!user ? <Login /> : <Redirect to="/" />}</Route>
        {user && (
          <>
            <Route path="/movies">
              <Home type="movie" />
            </Route>
            <Route path="/series">
              <Home type="series" />
            </Route>
            <Route path="/watch">
              <Watch />
            </Route>
          </>
        )}
      </Switch>
    </Router>
  );
};

export default App;

这样就不会创建实例，并且默认配置正确。

然后你像这样使用它：

axios.post( '/someendpoint', { test : true } )

如果有效请告诉我！

React 页面不会停止刷新

React page won't stop refreshing

javascript

vps

reactjs