Type 问题：typescript 中使用contextAPI 时如何将useState(react-hook) 用作全局变量？

Question

--开发环境：window10,VScode
--技术：反应--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 hook全局管理变量，我们在顶层组件中写了如下

// 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
的属性的值处发生类型错误内容如下
认证错误

Type 'AuthType | undefined' is not assignable to type 'object'. Type 'undefined' is not assignable to type 'object'.ts(2322)

setAuth错误

Type 'Dispatch<SetStateAction<AuthType | undefined>>' is not assignable to type '(a: object) => void'. Types of parameters 'value' and 'a' are incompatible. Type 'object' is not assignable to type 'SetStateAction<AuthType | undefined>'. Type 'object' is not assignable to type '(prevState: AuthType | undefined) => AuthType | undefined'. Type '{}' provides no match for the signature '(prevState: AuthType | undefined): AuthType | undefined'.ts(2322)

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

Answer 1

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

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

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

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

Answer 2

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

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

useState({})

Type 问题：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

reactjs

axios

react-context

use-state