如何使用Context API + React Native中的Hooks传递函数的参数"/>
如何使用Context API + React Native中的Hooks传递函数的参数
我正在使用函数组件以及上下文api和钩子,我想知道如何通过传递函数来传递useContext要访问的值
interface User{
user: string;
pass: string:
}
export const AuthProvider: React.FC = ({children}) => {
const [user, setUser] = useState<User | null>(null);
async function signIn(user : string, pass: string){
const response = await auth.signIn() ;
setUser(response.user);
}
return(
<AuthContext.Provider value={{signIn}}>
{children}
</AuthContext.Provider>
)
}
错误出现在'value = {{signIn}}']中>
Type '(user: string) => Promise<void>' is not assignable to type '() => Promise<void>'.ts(2322) auth.tsx(18, 5): The expected type comes from property 'signIn' which is declared here on type 'AuthContextData'
我正在组件内部使用:
const SignIn: React.FC = () => {
const {signIn} = useContext(Context);
const [userIn, setUser] = useState('');
const [passIn, setPass] = useState('');
async function handleSignIn(){
await signIn(userIn, passIn);
}
return (
<View style={styles.container}>
<TextInput onChangeText={text => setUser(text)} placeholder='User'></TextInput>
<TextInput onChangeText={text => setPass(text)} secureTextEntry={true} placeholder='Password'></TextInput>
<TouchableOpacity style={styles.button} onPress={handleSignIn}>
<Text style={styles.textButton}>Sign In</Text>
</TouchableOpacity>
</View>
)
}
export default SignIn;
我正在使用函数组件以及上下文api和钩子,我想知道如何通过传递函数接口User {user:string;来传递useContext要访问的值。 ...
回答如下:问题已解决,它只是在更改AuthContext使用的接口
更多推荐
如何使用Context API + React Native中的Hooks传递函数的参数
发布评论