使用 react typescript 将什么设置为提供者的值

Question

我正在尝试学习如何在 React 中使用钩子和上下文，但需要使用 TypeScript（也是新手）。

我对在下面的代码中设置提供程序值的内容感到困惑。我创建了一个 useFirebase 挂钩，它将 return 一些功能，例如 RegisterUser、SignIn、用户（它是一种状态）、注销。

首先我创建了 UseAuth.tsx 钩子，使用这个钩子我想导入我提到的上述功能。

import { useContext } from 'react';
import { AuthContext } from '../context/AuthProvider';

const UseAuth = () => {
    const auth = useContext(AuthContext)
    return auth
};

export default UseAuth;

一切正常，但提供程序值出现错误。错误是 (JSX attribute) React.ProviderProps<null>.value: null Type '{ RegisterUser: RegisterUserFunction; SignIn: SignInUserFunction; user: userState; logout: () => void; }' is not assignable to type 'null'. The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<null>' 我已经创建了一个接口 IAuth 但是我很困惑需要在哪里定义它。

import React, { createContext } from 'react';
import { UseFirebase } from '../hooks/UseFirebase';


export const AuthContext = createContext(null)

export interface IAuth {
    RegisterUser: () => void;
    SignIn : () => void;
    user : any
    logout : () => void;

}

const AuthProvider = ({ children } :any) => {
    const allContext = UseFirebase()
    return (
        <AuthContext.Provider value={allContext}>
            {children}
        </AuthContext.Provider>
    );
};

export default AuthProvider;

Answer 1

问题出在

export const AuthContext = createContext(null)

您需要向它传递一个正确的类型，这样它在尝试分配任何值时都不会报错。

试试

 React.createContext<IAuth>(initialValue);

有关更详细的说明，请查看这篇文章 react-context-with-typescrip

使用 react typescript 将什么设置为提供者的值

What to set as the Provider's value using react typescript

javascript

typescript

react-typescript

react-context