使用TypeScript的上下文提供程序的作用域问题

Question

我一直在开发React Context Provider，并试图在Provider中创建一个函数，以传递给组件使用。但是，当我尝试在提供程序中编写函数时，它会说类型为void的变量不能传递到值上。当我这样做的时候，它不会抛出这个错误：

import React, { useState, createContext, useEffect } from "react";
interface IUser {
user: String;
doSignup: (
email: String,
password: String,
verifyPassword: String,
name: String
) => void;
}
const doSignup = (
email: String,
password: String,
verifyPassword: String,
name: String
): void => {
console.log(email, password, verifyPassword, name);
};
export const UserContext = createContext<IUser>({
user: "",
doSignup: doSignup,
});
const UserContextProvider: React.FC = (props) => {
const [user, setUser] = useState("");
return (
<UserContext.Provider value={{ user, doSignup }}>
{props.children}
</UserContext.Provider>
);
};
export default UserContextProvider;

但这样做也会产生作用域问题，因为在其他函数中，我需要访问由useState创建的setUser方法。我也不能在组件之外使用useState挂钩。

试图找出最好的方法来做到这一点，但却功亏一篑。

Answer 1

我也遇到过同样的问题。这对我有效：

interface IUserContext {
foo: '';
userData: {};
updateFoo(foo: string): void;
updateUserData(userData: Object): void;
}
export const UserFooContext = createContext<IUserContext>({
foo: '',
userData: {},
updateFoo(foo: string) {
return null;
},
updateUserData(userData: Object) {
return null;
},
});

也许你可以在你的上下文中使用这个模式。我希望它能帮助