反应钩子：在验证时实例化状态钩子错误：无效钩子调用。钩子只能在函数组件的主体内部调用

Question

我得到以下错误，不确定我在箭头函数内实例化 react 钩子时做错了什么：

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

1. 您可能有不匹配的React和渲染器版本（如React DOM）。
2. 您可能违反了钩子的规则。
3. 同一应用程序中可能有多个React副本。请参阅https://reactjs.org/link/invalid-hook-call有关如何调试和修复此问题的提示

这是我的代码片段:(这是一个验证react js文件，它返回一个错误状态(如果有的话)，在调用方法中，它预期另一个状态错误):

从“react”导入React，{useState，use effect }；从“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```

Answer 1

您必须将“错误和 setError”传递到验证注册组件，从您调用或导入该组件的位置，如下所示：

<ValidateRegister error={error} setError={setError} />

// and take it as props in ValidateRegister component like

const ValidateRegister = ({error, setError}) => {
 //your code
 }

Answer 2

您正在执行const.ValidateRegister=（）=

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>

Answer 3

确保所有挂钩（使用状态，使用效果...）都在检查用户存在函数中