我正在嘗試在應用程式范圍的背景關系中使用 React 狀態，以便我的所有組件和頁面都可以以一種方便的方式訪問最重要的變數，從而更新它們。我注意到從背景關系設定和訪問狀態可以正常作業，但是每當 Route 更改時，我的狀態/背景關系就會完全重置為初始值。在過去的兩天里，我一直試圖繞過它，但我完全被困住了。
這是全域背景關系本身的宣告： GlobalContext.tsx
import { createContext } from "react";
export interface IGlobalState {
prop1: boolean,
prop2: string,
prop2: string,
[key: string]: any
}
export const initialState: IGlobalState = {
prop1: true,
prop2: "foo",
prop3: "bar",
};
export const GlobalContext = createContext({
globalState: initialState,
setGlobalState: (GlobalState: any) => {}
});
然后我創建一個背景關系提供者： App.tsx
import { GlobalContext, initialState } from './hooks/GlobalContext';
...
const App: React.FC = () => {
const [globalState, setGlobalState] = React.useState(initialState);
const globalContextState = { globalState, setGlobalState };
return(
<IonApp>
<GlobalContext.Provider value={globalContextState}>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/" exact={true}>
<Redirect to="/home" />
</Route>
<Route path="/home" exact={true}>
<Home />
</Route>
<Route path="/settings" exact={true}>
<Settings />
</Route>
</IonRouterOutlet>
</IonReactRouter>
</GlobalContext.Provider>
</IonApp>
);
}
在組件和頁面中，我像這樣訪問背景關系：
import { GlobalContext, IGlobalState, initialState } from '../hooks/GlobalContext';
...
const {globalState, setGlobalState} = useContext(GlobalContext);
setGlobalState((prevState: IGlobalState) => {
let state = {...prevState};
state.prop1 = "someValue";
return state;
});
...
<SomeComponent value={globalState.prop1} />
同樣，設定狀態本身就像讀取它一樣作業正常。但是，例如，每當我路由到另一個頁面時，<Settings />全域狀態都會重置為initialState. 這是為什么？這讓我難以置信。
注意：我嘗試將 -Tag 移到GlobalContext.Provider外部<IonApp>，因為我認為應用程式可能需要成為子組件，以便頁面可以訪問背景關系。然而，這并沒有奏效。
uj5u.com熱心網友回復：
問題是我如何路由到其他頁面。我href在 s 中使用 -properties IonItem，而我應該使用routerLink-properties。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/511588.html