javascript - React 页面不会停止刷新

问题描述

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

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

应用程序.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")
);

主页.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;

标签： javascriptreactjsvps

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

javascript - React 页面不会停止刷新

问题描述

解决方案

推荐阅读