Javascript 本机钩子调用无效

我一直在我的注册屏幕上看到这个错误。如果您能告诉我问题所在，我将不胜感激。谢谢大家!

错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

React和渲染器的版本可能不匹配（例如React DOM）

你可能违反了钩子的规则

同一应用程序中可能有多个React副本 有关如何调试和修复此问题的提示，请参阅https://fb me/react invalid hook call

从“react native”导入{ImageBackground、样式表、状态栏、维度、视图、图像}；
从“galio框架”导入{块、按钮、文本、主题}；
从“是”以是的形式导入*；
从“../components/SafeView”导入SafeView；
从“../components/Forms/Form”导入表单；
从“../components/Forms/FormField”导入FormField；
从“../components/Forms/FormButton”导入FormButton；
从“../components/IconButton”导入IconButton；
从“../components/Forms/FormErrorMessage”导入FormErrorMessage；
从“../config/firebase”导入{registerWithEmail}；
const{height，width}=Dimensions.get（'screen'）；
const validationSchema=Yup.object（）.shape({
名称：Yup.string（）
.required（）
.label（'Name'），
电子邮件：Yup.string（）
.required（'请输入有效的电子邮件'）
.email（）
.label（“电子邮件”），
密码：Yup.string（）
.required（）
.min（6，‘密码必须至少包含6个字符’）
.label（“密码”），
confirmPassword:Yup.string（）
.oneOf（[Yup.ref（'password'），“确认密码必须与密码匹配”）
.required（'需要确认密码'）
});
const[passwordVisibility，setPasswordVisibility]=useState（true）；
常量[rightIcon，setRightIcon]=useState（'eye'）；
const[confirmPasswordIcon，setConfirmPasswordIcon]=useState（'eye'）；
const[confirmPasswordVisibility，setConfirmPasswordVisibility]=useState（true）；
const[registerError，setRegisterError]=useState（“”）；
函数handlePasswordVisibility（）{
如果（右图标===‘眼睛’）{
setRightIcon（“眼睛离开”）；
setPasswordVisibility（！passwordVisibility）；
}否则，如果（rightIcon===‘眼睛离开’）{
setRightIcon（“眼睛”）；
setPasswordVisibility（！passwordVisibility）；
}
}
函数handleConfigPasswordVisibility（）{
如果（confirmPasswordIcon==='eye'）{
setConfirmPasswordIcon（“眼睛离开”）；
setConfirmPasswordVisibility（！confirmPasswordVisibility）；
}否则，如果（confirmPasswordIcon===='eye off'）{
setConfirmPasswordIcon（“眼睛”）；
setConfirmPasswordVisibility（！confirmPasswordVisibility）；
}
}
异步函数注册（值、操作）{
const{email，password}=值；
试一试{
等待注册者发送电子邮件（电子邮件、密码）；
}捕获（错误）{
setRegisterError（错误消息）；
}
}
导出默认类寄存器扩展React.Component{
render（）{
const{navigation}=this.props；
返回(
handleon注册（值）}
>
{}
navigation.goBack（）}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
填充：15，
},
后按钮：{
为内容辩护：“中心”，
对齐项目：“居中”，
利润率：10
}
});```

您正在混合功能组件和基于类的组件。React挂钩只能在功能组件内部使用。将您的

寄存器

组件转换为功能组件，并将所有

useState

调用移到组件内部。

您正在混合功能组件和基于类的组件。React挂钩只能在功能组件内部使用。将

寄存器

组件转换为功能组件，并将所有

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;

---

正如错误所暗示的，您没有正确地使用钩子。钩子需要位于功能组件的内部。目前，您正在使用它们，但没有组件。这里唯一的组件是类组件，因此如果要使用钩子，需要首先将其转换为功能组件，如下所示：

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;

---

我是个白痴哈哈。非常感谢你！我是个白痴哈哈。非常感谢你！