类型问题：在 typescript 中使用 contextAPI 时，如何使用 useState(react-hook) 作为全局变量？答案

【问题标题】：Type Problem: How can useState(react-hook) be used as a global variable when contextAPI is used in typescript?类型问题：在 typescript 中使用 contextAPI 时，如何使用 useState(react-hook) 作为全局变量？
【发布时间】：2021-12-09 14:03:37
【问题描述】：

--开发环境：window10、VScode
--Tech: 反应 --typescript

我只想使用 contextAPI 来全局管理变量。（我不使用 useReducer）
变量是从 axios 接收的对象。

    const result = await axios.post('/register', {name,username,password})
        
    console.log(result.data);

我想使用 useState 从顶部组件管理变量。
但是由于类型问题，我不能做我想做的事。

// AuthContext.tsx
import {createContext, useContext} from 'react';

export type AuthType = {
    auth: object;
    setAuth: (a: object) => void;
}

export const AuthContext = createContext<AuthType>({
    auth: {a:1},
    setAuth: () => console.log('why not worked??')
})

export const useAuth = () => useContext(AuthContext);

我将 auth 类型声明为接收 result.data 的对象（此变量为对象）。
为了使用 useState 挂钩全局管理变量，我们在顶层组件中编写了以下内容。

// App.tsx
import React,{useState} from 'react'
import styled from 'styled-components';
import ToolBar from './components/ToolBar';
import MainPage from "./pages/MainPage";
import LoginPage from "./pages/LoginPage";
import RegisterPage from "./pages/RegisterPage";
import { Switch, Route } from 'react-router-dom';
import { AuthContext, AuthType } from './contexts/AuthContext';

const Container = styled.div`
    max-width: 1200px;
    margin: 0 auto;
`;

function App() {
    const [auth, setAuth] = useState<AuthType>()
    return (
        <Container>
            <AuthContext.Provider value={{auth,setAuth}} >
                <ToolBar/>
                <Switch>
                    <Route path='/' component={MainPage} exact />
                    <Route path='/auth/register' component={RegisterPage} exact/>
                    <Route path='/auth/login' component={LoginPage} exact/>
                </Switch>
            </AuthContext.Provider>
        </Container>
    )
}
export default App

但是，标签 AuthContext.Provider 的属性值出现类型错误
内容如下。
auth的错误

键入'AuthType | undefined' 不可分配给类型 'object'。类型“未定义”不可分配给类型“对象”.ts(2322)

setAuth的错误

类型'调度>' 不能分配给类型 '(a: object) => void'。参数“value”和“a”的类型不兼容。类型 'object' 不可分配给类型 'SetStateAction'。类型 'object' 不可分配给类型 '(prevState: AuthType | undefined) => AuthType |不明确的'。类型“{}”不匹配签名“(prevState: AuthType | undefined): AuthType |未定义'.ts(2322)

我找不到任何与此相关的信息和知识。所以想请教各位前辈。
对于低水平的问题，我深表歉意。

【问题讨论】：

标签： reactjs typescript axios use-state context-api

【解决方案1】：

您似乎有未定义的初始状态。此外，您将状态类型声明为 entire 上下文类型，而实际上您只存储“auth”类型，即一个对象。

const [auth, setAuth] = useState<AuthType>(); // <-- undefined

由于您将auth 状态定义为对象，因此请提供一个对象作为有效的初始状态并声明类型。

const [auth, setAuth] = useState<object>({}); // <-- empty object

【讨论】：

非常感谢您的回答。我明白你的解释。但是，auth 中的错误已解决，但 setAuth 中的错误未解决。你能对此有更多的答案吗？
@tojaeung 我明白了，我错过了您在状态和状态更新器函数类型方面遇到的问题，抱歉。我发现您可能输入了错误的状态，请查看更新的答案。
感谢您的回答。高级的！！使用 useState 对变量进行全局管理比较困难，所以我尝试另辟蹊径。不过前辈的回答给了我启发。

【解决方案2】：

您为 typescript 声明了 <AuthType>，这很好，但您的钩子现在是空的！

如果你想让你的钩子成为一个对象，那么：

useState({})

【讨论】：