【问题标题】:How to pass parameters of a function using Context API + Hooks in React Native如何在 React Native 中使用 Context API + Hooks 传递函数的参数
【发布时间】:2020-05-06 01:16:23
【问题描述】:

我正在使用函数组件以及上下文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;

【问题讨论】:

  • 你正在传递一个需要两个参数的函数,而你没有传递任何东西
  • 是的,但是如何在provider中传递这些值
  • 您在哪里/如何使用signIn
  • 我在组件内部调用 @go_diego
  • 那么signIn()?

标签: javascript node.js reactjs react-native


【解决方案1】:

问题解决了,只是修改了AuthContext使用的接口

interface AuthContextData {
    user: User | null;
    loading: boolean;
    signIn(user: string, pass: string): Promise<void>;
}

const AuthContext = createContext<AuthContextData>({} as AuthContextData)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-07-15
    • 2021-09-17
    • 2021-09-26
    • 2019-10-17
    • 2021-04-24
    • 2019-06-08
    • 2020-11-21
    • 2017-03-06
    相关资源
    最近更新 更多