使用效果仅在刷新页面后起作用

Question

我在上下文中使用使用效果。我认为使用效果应在加载页面后运行，但是它不起作用，但是如果我刷新页面（F5），则可以使用。

我是新的使用React，但我认为它应该与Arg一样的空数组使用。

这是上下文：

import { createContext, useState, useEffect } from "react";

const PatientContext = createContext();

export const PatientsProvider = (props) => {
    const {children} = props;
    
    const [patients, setPatients] = useState([]);
    

    //get the patients from the database
    useEffect( () => {
        const url = `${import.meta.env.VITE_BACKEND_URL}/api/patients`;
        const token = localStorage.getItem("token");

        if(!token) return;

        const getPatients = async () => {
            try {
                const response = await fetch(url, {
                    method: 'GET', 
                    headers: {
                    'Content-Type': 'application/json',
                    "Authorization" : `Bearer ${token}`
                    }
                });
        
                const result = await response.json();
        
                if (!response.ok){ 
                    throw new Error(result.msg);
                }
        
                const {createdAt, __v, updatedAt, ...savedPatient} = result;

                setPatients(result)
                setLoading(false);
                
        
                } catch (error) {
                setLoading(false)
                setAlert({msg: error.message, error1: true})
                console.log(error)
                
                }
        }
        
        getPatients();
    }, [])

编辑：

现在我意识到问题是在登录页面中第一次使用效果（在我需要之前，因为在登录页面后需要它）因为PatientProvider是所有组件的父母，甚至是登录组件，但是现在我不知道如何将此提供商设置为“登录组件”。

这是我的路线：

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <PatientsProvider>
          <Routes>
            <Route path="/" element={< Authlayout />}>
              <Route index element={ <Login /> } />
              <Route path="sign-up" element= {<SignUp />}/>
              <Route path="forgot-password" element= {<ForgotPassword />}/>
              <Route path="forgot-password/:token" element= {<ResetPassword />}/>
              <Route path="confirm-account/:token" element= {<Confirm />}/>
            </Route>

            <Route path="/admin" element={<LoginLayout />}>
              <Route index element={<AdminPatients />} />
              <Route path="profile" element= {<Profile />}/>
              <Route path="change-password" element= {<ChangePass />}/>
            </Route>
          </Routes>
        </PatientsProvider>
      </AuthProvider>
    </BrowserRouter>
  )
}

Answer 1

似乎您的令牌不是在组件安装时设置并调用此usefeft（）时设置的。

我可以想到2个选项：

1. 将您的会话数据存储在外部上下文状态，并从那里获取令牌。然后，您可以将令牌添加为useeffect（）中的依赖项：

// assuming token is stored in context state 
// and will update
const {token} = useAuthContext() 
useEffect(() => {
// ...
// will be called every time the token changes
}, [token])

2. 在此组件中订阅localstorage。 react hookz libz lib具有不错的挂钩< /a>已经写的，在此提供为简单起见：

import { useLocalStorageValue } from '@react-hookz/web'

const PatientsProvider = (props) => {
const [token] = useLocalStorageValue('token')

useEffect(() => {
// do sth with the token
}, [token])