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;

索引.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;

uj5u.com熱心網友回復：

每次渲染都會創建一個新的 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
};

uj5u.com熱心網友回復：

包含組件的路由是否無限重繪？那是因為每次狀態改變時，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 } )

讓我知道它是否有效！

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/345875.html

標籤：javascript 反应虚拟主机

上一篇：從reactjs資料檔案中的檔案夾加載影像并傳遞到jsx檔案

下一篇：如何將此函式轉換為類組件，以便我可以使用渲染來呼叫回傳？