useState with useContext in Typescript

Question

假设我有一个用于检查用户是否登录的基本设置:

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。现在的问题是typescript在这里对我大喊大叫，特别是在Provider的值中:

Type '{ context: string | null; setContext: 
React.Dispatch<React.SetStateAction<string | null>>; }' is not assignable to type 'string'.ts(2322)

我可以强制强制转换值如下:

value={{context, setContext} as any}

但这似乎不是一个特别优雅的"typescripty"解决方案。

任何帮助都是感激的!

Answer 1

根据Alex的回答，我想出了一个适合我的调整:

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>

Answer 2

您输入的上下文为:

string | null

然后为上下文提供一个(大约)类型的值:

{ context: string | null, setContext: (newString) => void }

如果你想在你的上下文中设置状态设置器，那么它需要成为上下文中类型的一部分:

const UserContext = createContext<{
context: string | null,
setContext: (newValue) => void
}>({
context: null,
setContext: () => undefined
})