當 React 中的用戶點擊“后退按鈕”時，處理在 useEffect 中重新調用 function

Question

如果用戶單擊瀏覽器上的“后退按鈕”，我將嘗試不再調用loadUserPosts() function。 我認為這是因為isLogged useState 因為在單擊后退按鈕時發生了變化。

只有當用戶登錄時， loadUserPosts function 才會在useEffect中，所以我有這個：

在 Posts.js 組件中我有這個：

import { useState, useEffect } from "react";
import { AuthUseContext } from  '../context/AuthContext';
import Axios from 'axios';

function Posts() {
    const [posts, setPosts] = useState([]);
    const { isLogged, setIsLogged, userData, setUserData } = AuthUseContext();

    useEffect(() => {
        if(isLogged) {
            loadUserPosts();
        }
    }, [isLogged]);

    // my API request to load all user posts
    function loadUserPosts()
    {
        Axios.post('/posts/load', {
            user: userData.id
        }).then((response) => {
            if(response.data.status === "success")
            {
                setPosts(response.data.posts);
            }
        }).catch((error) => {
            console.log("Something went wrong.. We are investigating.");
        })
    }

    return (
        <>
            {posts.map((p) => {
                <div className="post" key={p.id}>
                    <div className="post-user">
                        {p.username}
                    </div>
                    <div className="post-text">
                        {p.message}
                    </div>
                </div>
            })}
        </>
    )
}

export default Posts

如果我刪除 dependecies [isLogged] isLogged 將為false ，因為 App.js 中 API 請求的結果尚未發送。

在 app.js 中，我有一個 API 請求到后端以檢查用戶是否登錄（使用 NodeJs/Express 作為后端，cookie-session 作為中間件）。

import { useEffect } from 'react'
import { Route, Routes } from 'react-router-dom'

import './css/style.css'

import Sidebar from './pages/Sidebar'
import Posts from './pages/Posts'

import { AuthUseContext } from  './context/AuthContext';

import Axios from 'axios'

function App() {
    const { isLogged, setIsLogged, userData, setUserData } = AuthUseContext();

    useEffect(() => {
        Axios.post('/checkuser', {
            userStatus: isLogged,
            userData: userData
        }).then((response) => {
            setIsLogged(response.data.status); // true / false
            setUserData(response.data.userdata); // { id: ..., name: ..., ...etc...}
        }).catch(function (error) {
            console.log("Something went wrong.. We are investigating.");
        });
        // eslint-disable-next-line
    }, [isLogged])

    return (
        <>
            <Sidebar />
            <div className="content">
                <Routes>
                    <Route path="/" element={<Posts />} />
                    <Route path="*" element={ <h1>Not found (404)</h1> } />
                </Routes>
            </div>
        </>
    );
    
}

export default App;

有人可以幫助我或者我應該如何構建我的組件？

Answer 1

使用 react 查詢它 handle.network 緩存所以它不會再次發出請求