假設我有一個基本設定來檢查用戶是否登錄：
import { createContext } from "react";
const UserContext = createContext<string | null>(null)
export default UserContext
在我的 App.tsx 中，我想創建一個 useState 掛鉤，以便我可以在整個應用程式中管理背景關系的狀態：
//Context
const [context, setContext] = useState<string | null>(null)
<UserContext.Provider value={{context, setContext}}>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/login" element={<Login/>}/>
<Route path="/register" element={<Register/>}/>
<Route path="/admin" element={<Admin/>}></Route>
</Routes>
</UserContext.Provider>
據我所知，如果我想拒絕訪問某些頁面，我只需要登錄用戶的名稱，或者將背景關系的狀態設定為 null。現在的問題是打字稿在這里對我大喊大叫，特別是在提供者的價值方面：
Type '{ context: string | null; setContext:
React.Dispatch<React.SetStateAction<string | null>>; }' is not assignable to type 'string'.ts(2322)
我可以強制轉換值如下：
value={{context, setContext} as any}
但這似乎不是一個特別優雅的“打字稿”解決方案。
任何幫助表示贊賞！
uj5u.com熱心網友回復：
您已將背景關系輸入為：
string | null
但是隨后您為（大約）型別的該背景關系提供了一個值：
{ context: string | null, setContext: (newString) => void }
因此，如果您希望在您的背景關系中使用狀態設定器，那么它需要成為背景關系型別的一部分：
const UserContext = createContext<{
context: string | null,
setContext: (newValue) => void
}>({
context: null,
setContext: () => undefined
})
uj5u.com熱心網友回復：
根據亞歷克斯的回答，我想出了一個適合我的調整：
type UserContextType = {
context: string | null,
setContext: React.Dispatch<React.SetStateAction<string | null>>
}
const iUserContextState = {
context: null,
setContext: () => {}
}
const UserContext = createContext<UserContextType>(iUserContextState)
export default UserContext
然后在 App.tsx 中：
//Context
const [context, setContext] = useState<string | null>(null)
<UserContext.Provider value={{context, setContext}}>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/login" element={<Login/>}/>
<Route path="/register" element={<Register/>}/>
<Route path="/admin" element={<Admin/>}></Route>
</Routes>
</UserContext.Provider>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/482441.html