TypeScript中结合ContextAPI用useState做全局状态管理报类型错误如何解决？

类型错误的核心是混淆了「Context整体结构类型」和「要存储的auth数据类型」：你定义的AuthType是整个Context的返回结构（包含auth字段和setAuth方法），但你在App组件里的useState是用来管理auth数据本身的，不应该把AuthType作为useState的泛型参数。

1. 调整AuthContext.tsx类型定义 #

建议不要使用模糊的object类型，先单独定义auth数据的类型，再定义Context的整体类型：

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

// 先定义你接口返回的auth数据结构，不确定的话可以先用Record<string, any>过渡
export type AuthDataType = {
  // 这里按你实际接口返回字段填，示例如下：
  token?: string;
  user?: {
    id: number;
    name: string;
    username: string;
  }
}

// Context的整体类型
export type AuthContextType = {
  auth: AuthDataType;
  setAuth: (data: AuthDataType) => void;
}

export const AuthContext = createContext<AuthContextType>({
  auth: {},
  setAuth: () => {}
})

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

2. 修正App.tsx中的useState使用 #

useState只需要管理auth数据本身，不要传入之前的AuthType作为泛型：

// 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, AuthDataType } from './contexts/AuthContext';

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

function App() {
    // 这里泛型填auth数据的类型，给初始值空对象就不会出现undefined问题
    const [auth, setAuth] = useState<AuthDataType>({})
    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

3. 业务组件使用示例 #

在注册/登录页面调用接口后直接传入返回的data即可：

const { setAuth } = useAuth()
// 接口请求逻辑
const result = await axios.post('/register', {name,username,password})
setAuth(result.data)

内容的提问来源于stack exchange，提问作者user16675068