【发布时间】: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