為什么我的 React 上下文沒有更新？

Question

當我使用該應用程序並導航到 SetContext 組件時，我看到 auth 的值是正確的（“虛擬值”），在編輯字段中輸入一個值並按下按鈕后，我在 App 組件中看到 setAuth 方法觸發器和然后我還看到了 App 組件的 useEffect 方法中的身份驗證更改（我只是將其放入以查看它是否注冊了更新）。 那會很棒，除了然后導航到任何頁面，auth 的值將恢復為原始值（“虛擬值”），我無法確定原因。

以下是我使用的 React 庫版本：

    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",

這是我的 index.js （它純粹是樣板，但我會發布只是為了證明它）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <edited per stack overflow editor requirements>;

這是我的 App.js：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';
import { AuthProvider } from './components/AuthContext';
import Navbar from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
import SetContext from './components/SetContext';

function App() {
  const [auth, setAuth] = React.useState("dummy value");

  React.useEffect(() => {
    console.log("auth updated to: "+auth);
  }, [auth]);

  const changeAuth = (value) => {
    setAuth(value);
  }

  return (
    <>
      <AuthProvider value={auth}>
        <Router>
          <Navbar />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/home" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/setcontext" element={<SetContext setAuth={changeAuth} />} />
          </Routes>
        </Router>
        <footer>This is the footer</footer>
      </AuthProvider>
    </>
  );
}

export default App;

最后是我的 SetContext.js：

import React from 'react';
import AuthContext from './AuthContext';

const SetContext = ( { setAuth } ) => {
    const auth = React.useContext(AuthContext);

    const changeHandler = (event) => {
        const value = document.getElementById("newContext").value;
        setAuth(value);
    }

    return (
        <>
            <div>This is the SetContext Component The auth context value is {auth}</div>
            <div><input id="newContext"></input></div>
            <div><button onClick={changeHandler}>Set Context</button></div>
        </>
    );
}

export default SetContext;

Answer 1

據我所知，您正在正確更新 Context 值。 當您訪問 Context 值時會出現此問題。 Context 值只是auth狀態值，它是一個字符串類型。

const [auth, setAuth] = React.useState("dummy value");

...

return (
  <AuthProvider value={auth}> // <-- context value is auth
    ...
  </AuthProvider>
);

訪問 Context 值時，代碼錯誤地嘗試將其解構，就好像它是一個對象一樣。

const { auth } = React.useContext(AuthContext);

消費者應該只取返回值。

const auth = React.useContext(AuthContext);

Answer 2

我建議你使用其他結構，創建一個新文件，例如 AuthContext.js，具有這種結構

import React, {useState, useContext} from 'react';

const AuthContext = React.createContext();

export const useAuthContext = () => {
    return useContext(AuthContext);
}

export const AuthProvider = ({children}) => {
    const [auth, setAuth] = React.useState("dummy value");
    const state = {
        auth,
        setAuth
    }
   return (
       <AuthContext.Provider value={state}>
            {children}
        </AuthContext.Provider>
   );
}

在 index.js 中不要傳遞值，AuthProvider 中的整個 DOM 將是 AuthContext.js 中的孩子道具

   <AuthProvider>
        <Router>
          <Navbar />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/home" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/setcontext" element={<SetContext />} />
          </Routes>
        </Router>
        <footer>This is the footer</footer>
      </AuthProvider>

並像這樣在 SetContext.js 上使用這個 AuthContext ，沒有任何道具，因為 setAuth 將是你的上下文狀態

從'./AuthContext'導入{useAuthContext}；

const SetContext = () => {
    const { auth ,setAuth} = useAuthContext();
    const changeHandler = (event) => {
        const value = document.getElementById("newContext").value;
        setAuth(value);
    }

    return (
        <>
            <div>This is the SetContext Component The auth context value is {auth}</div>
            <div><input id="newContext"></input></div>
            <div><button onClick={changeHandler}>Set Context</button></div>
        </>
    );
}

使用 value={auth} 方式不是好習慣

在 App.js 中，useEffect 依賴可以是 context auth

const { auth} = useAuthContext();

  React.useEffect(() => {
    console.log("auth updated to: "+auth);
  }, [auth]);