我得到以下错误，不确定我在实例化箭头函数内的react钩子时做错了什么:
错误:无效钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:
- 你可能有不匹配的版本的React和渲染器(如React DOM)
- 你可能违反了Hooks的规则
- 你可能在同一个应用程序中有多个React副本有关如何调试和修复此问题的提示，请参阅https://reactjs.org/link/invalid-hook-call。
这是我的代码片段:(这是一个验证react js文件，返回错误的状态，如果有的话，在调用方法中，它期望另一个状态错误):
import React， {useState, useEffect} from ' React ';从'axios'中导入axios;
const [errors, setErrors] = useState({});
const checkUserExists = async (phone) => {
console.log('Inside CheckUserExists')
let isUserExist = false;
let formData = new FormData();
formData.append('phone', phone);
const response = await axios.post('http://localhost:3001/doesUserExistByPhone', formData).then(response=>{
isUserExist = false;
console.log('Success response: ', response)
}).catch(errorResponse=>{
console.log('Error response: ', errorResponse)
isUserExist = true;
setErrors(
...errors, {phone: 'User Already exist, u know?'}
)
})
return isUserExist;
}
const patternName = new RegExp('^[a-zA-Z ]{3,20}$')
const patternPhone = new RegExp('^[0-9]{9,10}$')
const patternEmail = new RegExp('^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$')
const patternPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')
if(!values.name || !patternName.test(values.name)){
//errors.name="Please enter a valid name"
}
if(!values.phone || !patternPhone.test(values.phone)){
//errors.phone="Please enter a valid Phone number of 9-10 digits"
}
if(!values.email || !patternEmail.test(values.email)){
//errors.email="Please enter a valid email address"
}
if(!values.password || !patternPassword.test(values.password)){
//errors.password="Please enter a strong password to continue. A strong password has: Atleast 8 characters in length, 2 letters in upper case, 1 special character (!@#$&*), 2 number (0-9), 3 letters in lower case"
}
if(!values.isTermsAndConditionsAccepted){
//errors.isTermsAndConditionsAccepted = "Please Accept the Terms and conditions"
}
//Check if the user already exist
if(values.phone){
console.log('Inside if Values.phone is not NULL... will check if user exist...')
checkUserExists(values.phone)
}
console.log('Errors found before creating user: ', errors);
return {errors};
}
export default ValidateRegister```
确保所有的钩子(useState, useEffect…)都在checkUserExists函数内
您是否正在做const validaterregister = () =>{}来包装您发布的所有内容?似乎你没有使用react组件，或者你试图使用组件作为一个函数util，所以你不能使用const [errors, setErrors] = useState({});你可以创建一个名为useCheckUserList的自定义钩子，带有error和setError状态，并返回checkUserExists和error状态，然后把它导入到你的组件中。
import {useState} from 'react'
export const useCheckUserList = () => {
const [errors, setErrors] = useState({});
const checkUserExists = async (phone) => {
console.log('Inside CheckUserExists')
let isUserExist = false;
let formData = new FormData();
formData.append('phone', phone);
const response = await axios.post('http://localhost:3001/doesUserExistByPhone', formData).then(response=>{
isUserExist = false;
console.log('Success response: ', response)
}).catch(errorResponse=>{
console.log('Error response: ', errorResponse)
isUserExist = true;
setErrors(
...errors, {phone: 'User Already exist, u know?'}
)
})
return isUserExist;
}
return {errors, checkUserList};
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>在你要使用它的文件中，只需导入useCheckUserList，并执行以下操作:const {errors, checkUserList} = useCheckUserList()现在您可以使用checkUserList函数和错误状态。
这只是一个例子，你也可以把你所有的代码放入一个自定义钩子中，然后在validaterregister组件中使用它。
必须通过" error "one_answers" seterror ";到你调用或导入该组件的validaterregister组件，如下所示:
<ValidateRegister error={error} setError={setError} />
// and take it as props in ValidateRegister component like
const ValidateRegister = ({error, setError}) => {
//your code
}