如何使用Context API + React Native中的Hooks传递函数的参数

编程入门 行业动态 更新时间:2024-10-13 16:19:08

<a href=https://www.elefans.com/category/jswz/34/1771452.html style=如何使用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传递函数的参数

本文发布于:2024-05-07 06:43:11,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1754891.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:如何使用   函数   参数   API   Context

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!