如何解决无效的钩子调用 React Native
我的注册屏幕上不断出现此错误。如果您能告诉我问题是什么,我将不胜感激。谢谢!
错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的:
- 您的 React 和渲染器版本可能不匹配(例如 React DOM)
- 你可能违反了钩子规则
- 您可能在同一个应用中拥有多个 React 副本 有关如何调试和解决此问题的提示,请参阅 https://fb me/react-invalid-hook-call。
import { imagebackground,StyleSheet,StatusBar,Dimensions,View,Image } from 'react-native';
import { Block,Button,Text,theme } from 'galio-framework';
import * as Yup from 'yup';
import SafeView from '../components/SafeView';
import Form from '../components/Forms/Form';
import FormField from '../components/Forms/FormField';
import FormButton from '../components/Forms/FormButton';
import IconButton from '../components/IconButton';
import FormErrorMessage from '../components/Forms/FormErrorMessage';
import { registerWithEmail } from '../config/firebase';
const { height,width } = Dimensions.get('screen');
const validationSchema = Yup.object().shape({
name: Yup.string()
.required()
.label('Name'),email: Yup.string()
.required('Please enter a valid email')
.email()
.label('Email'),password: Yup.string()
.required()
.min(6,'Password must have at least 6 characters')
.label('Password'),confirmPassword: Yup.string()
.oneOf([Yup.ref('password')],'Confirm Password must match Password')
.required('Confirm Password is required')
});
const [passwordVisibility,setPasswordVisibility] = useState(true);
const [rightIcon,setRightIcon] = useState('eye');
const [confirmPasswordIcon,setConfirmPasswordIcon] = useState('eye');
const [confirmPasswordVisibility,setConfirmPasswordVisibility] = useState(true);
const [registerError,setRegisterError] = useState('');
function handlePasswordVisibility() {
if (rightIcon === 'eye') {
setRightIcon('eye-off');
setPasswordVisibility(!passwordVisibility);
} else if (rightIcon === 'eye-off') {
setRightIcon('eye');
setPasswordVisibility(!passwordVisibility);
}
}
function handleConfirmPasswordVisibility() {
if (confirmPasswordIcon === 'eye') {
setConfirmPasswordIcon('eye-off');
setConfirmPasswordVisibility(!confirmPasswordVisibility);
} else if (confirmPasswordIcon === 'eye-off') {
setConfirmPasswordIcon('eye');
setConfirmPasswordVisibility(!confirmPasswordVisibility);
}
}
async function handleOnSignUp(values,actions) {
const { email,password } = values;
try {
await registerWithEmail(email,password);
} catch (error) {
setRegisterError(error.message);
}
}
export default class Register extends React.Component {
render() {
const { navigation } = this.props;
return (
<SafeView style={styles.container}>
<Form
initialValues={{
name: '',email: '',password: '',confirmPassword: ''
}}
validationSchema={validationSchema}
onSubmit={values => handleOnSignUp(values)}
>
<FormField
name="name"
leftIcon="account"
placeholder="Enter name"
autoFocus={true}
/>
<FormField
name="email"
leftIcon="email"
placeholder="Enter email"
autoCapitalize="none"
keyboardType="email-address"
textContentType="emailAddress"
/>
<FormField
name="password"
leftIcon="lock"
placeholder="Enter password"
autoCapitalize="none"
autoCorrect={false}
secureTextEntry={passwordVisibility}
textContentType="password"
rightIcon={rightIcon}
handlePasswordVisibility={handlePasswordVisibility}
/>
<FormField
name="confirmPassword"
leftIcon="lock"
placeholder="Confirm password"
autoCapitalize="none"
autoCorrect={false}
secureTextEntry={confirmPasswordVisibility}
textContentType="password"
rightIcon={confirmPasswordIcon}
handlePasswordVisibility={handleConfirmPasswordVisibility}
/>
<FormButton title={'Register'} />
{<FormErrorMessage error={registerError} visible={true} />}
</Form>
<IconButton
style={styles.backButton}
iconName="keyboard-backspace"
color={Colors.white}
size={30}
onPress={() => navigation.goBack()}
/>
</SafeView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 15,},backButton: {
justifyContent: 'center',alignItems: 'center',marginVertical: 10
}
});```
解决方法
您正在混合基于函数和类的组件。 React Hooks 只能在函数式组件中使用。将您的 Register
组件转换为功能组件并将所有 useState
调用移到组件内。
正如错误所暗示的那样,您没有正确使用钩子。钩子需要位于功能组件内部。目前,您在没有组件的情况下使用它们。你这里唯一的组件是一个类组件,所以如果你想使用钩子,你需要先把它转换成一个功能组件,像这样:
import React,{ useState } from 'react';
const Register = (props) => {
const [passwordVisibility,setPasswordVisibility] = useState(true);
const [rightIcon,setRightIcon] = useState('eye');
const [confirmPasswordIcon,setConfirmPasswordIcon] = useState('eye');
const [confirmPasswordVisibility,setConfirmPasswordVisibility] = useState(true);
const [registerError,setRegisterError] = useState('');
// other component logic code here
return (
// your component rendering code here
);
}
export default Register;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。