Блог

Главная - Вопросы по программированию - Крючки реакции: Создание экземпляров крючков состояния при ошибке проверки: Недопустимый вызов крючка. Крючки могут вызываться только внутри тела компонента функции

Крючки реакции: Создание экземпляров крючков состояния при ошибке проверки: Недопустимый вызов крючка. Крючки могут вызываться только внутри тела компонента функции

#reactjs #react-hooks #react-hook-form

Вопрос:

Я получаю следующую ошибку, не зная, что я делаю неправильно при создании экземпляров крючков react внутри функции со стрелкой.:

Ошибка: Неверный вызов соединения. Крючки могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

  1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM).
  2. Возможно, вы нарушаете Правила Крючков
  3. У вас может быть более одной копии React в одном приложении см. https://reactjs.org/link/invalid-hook-call для получения советов о том, как отладить и устранить эту проблему.

Это мой фрагмент кода: (Это файл js react для проверки, который возвращает состояние ошибок, если таковые имеются, и в вызывающем методе ожидается другая ошибка состояния):

импортируйте React, {useState, useEffect} из «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}

Ответ №1:

убедитесь, что все ваши крючки (useState, useEffect...) находятся внутри функции checkUserExists

Комментарии:

1. Это не сработает для меня, так как мне нужно вставить в состояние ошибок вне метода checkUserExists. Я также проверяю другие параметры, а затем вставляю их в состояние ошибок, если есть какая-либо ошибка

Ответ №2:

Вы делаете const ValidateRegister = () = > {}, чтобы обернуть все, что вы публикуете? Похоже, что вы не используете компонент react или пытаетесь использовать компонент в качестве функции util, поэтому вы не можете использовать const [ошибки, setErrors] = useState({}); Вы можете создать пользовательский хук под названием useCheckUserList с состоянием error и setError, вернуть checkUserExists и состояние ошибки и импортировать его в свой компонент.

 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 {ошибки, checkUserList} = useCheckUserList()
Теперь вы можете просмотреть функцию checkUserList и состояние ошибок.

Это всего лишь пример, вы также можете поместить весь свой код в пользовательский хук, а затем использовать его в компоненте ValidateRegister.

Комментарии:

1. Как мне это сделать? Нужно ли мне создавать класс? Я уже встроил крючки в функцию стрелки, разве этого недостаточно для компонента React?

2. Если возможно, покажите пример, пожалуйста?

3. Я отредактировал пост, чтобы привести вам пример, надеюсь, это поможет

Ответ №3:

вы должны передать "error и setError" своему компоненту ValidateRegister, из которого вы вызвали, или импортировать этот компонент, например:

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

// and take it as props in ValidateRegister component like

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

)
const patternPhone = new RegExp('^[0-9]{9,10}

Ответ №1:

убедитесь, что все ваши крючки (useState, useEffect...) находятся внутри функции checkUserExists

Комментарии:

1. Это не сработает для меня, так как мне нужно вставить в состояние ошибок вне метода checkUserExists. Я также проверяю другие параметры, а затем вставляю их в состояние ошибок, если есть какая-либо ошибка

Ответ №2:

Вы делаете const ValidateRegister = () = > {}, чтобы обернуть все, что вы публикуете? Похоже, что вы не используете компонент react или пытаетесь использовать компонент в качестве функции util, поэтому вы не можете использовать const [ошибки, setErrors] = useState({}); Вы можете создать пользовательский хук под названием useCheckUserList с состоянием error и setError, вернуть checkUserExists и состояние ошибки и импортировать его в свой компонент.









И в файле, в котором вы собираетесь его использовать, просто импортируйте список пользователей useCheckUserList и выполните следующие действия:

const {ошибки, checkUserList} = useCheckUserList()

Теперь вы можете просмотреть функцию checkUserList и состояние ошибок.


Это всего лишь пример, вы также можете поместить весь свой код в пользовательский хук, а затем использовать его в компоненте ValidateRegister.




Комментарии:


1.  Как мне это сделать?   Нужно ли мне создавать класс?   Я уже встроил крючки в функцию стрелки, разве этого недостаточно для компонента React?  


2.  Если возможно, покажите пример, пожалуйста?  


3.  Я отредактировал пост, чтобы привести вам пример, надеюсь, это поможет  


Ответ №3:




вы должны передать "error и setError" своему компоненту ValidateRegister, из которого вы вызвали, или импортировать этот компонент, например:






)

    const patternEmail = new RegExp('^[a-zA-Z0-9._:$!%-] @[a-zA-Z0-9.-] .[a-zA-Z]


Ответ №1:




убедитесь, что все ваши крючки (useState, useEffect...) находятся внутри функции checkUserExists




Комментарии:




1.  Это не сработает для меня, так как мне нужно вставить в состояние ошибок вне метода checkUserExists.   Я также проверяю другие параметры, а затем вставляю их в состояние ошибок, если есть какая-либо ошибка  



Ответ №2:




Вы делаете const ValidateRegister = () = > {}, чтобы обернуть все, что вы публикуете? Похоже, что вы не используете компонент react или пытаетесь использовать компонент в качестве функции util, поэтому вы не можете использовать const [ошибки, setErrors] = useState({}); Вы можете создать пользовательский хук под названием useCheckUserList с состоянием error и setError, вернуть checkUserExists и состояние ошибки и импортировать его в свой компонент.














И в файле, в котором вы собираетесь его использовать, просто импортируйте список пользователей useCheckUserList и выполните следующие действия:

const {ошибки, checkUserList} = useCheckUserList()

Теперь вы можете просмотреть функцию checkUserList и состояние ошибок.


Это всего лишь пример, вы также можете поместить весь свой код в пользовательский хук, а затем использовать его в компоненте ValidateRegister.




Комментарии:




1.  Как мне это сделать?   Нужно ли мне создавать класс?   Я уже встроил крючки в функцию стрелки, разве этого недостаточно для компонента React?  


2.  Если возможно, покажите пример, пожалуйста?  


3.  Я отредактировал пост, чтобы привести вам пример, надеюсь, это поможет  



Ответ №3:




вы должны передать "error и setError" своему компоненту ValidateRegister, из которого вы вызвали, или импортировать этот компонент, например:






)

    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 (!@#$amp;*), 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```

 


Ответ №1:




убедитесь, что все ваши крючки (useState, useEffect…) находятся внутри функции checkUserExists




Комментарии:


1.  Это не сработает для меня, так как мне нужно вставить в состояние ошибок вне метода checkUserExists.   Я также проверяю другие параметры, а затем вставляю их в состояние ошибок, если есть какая-либо ошибка  


Ответ №2:




Вы делаете const ValidateRegister = () = > {}, чтобы обернуть все, что вы публикуете? Похоже, что вы не используете компонент react или пытаетесь использовать компонент в качестве функции util, поэтому вы не можете использовать const [ошибки, setErrors] = useState({}); Вы можете создать пользовательский хук под названием useCheckUserList с состоянием error и setError, вернуть checkUserExists и состояние ошибки и импортировать его в свой компонент.














И в файле, в котором вы собираетесь его использовать, просто импортируйте список пользователей useCheckUserList и выполните следующие действия:

const {ошибки, checkUserList} = useCheckUserList()

Теперь вы можете просмотреть функцию checkUserList и состояние ошибок.


Это всего лишь пример, вы также можете поместить весь свой код в пользовательский хук, а затем использовать его в компоненте ValidateRegister.




Комментарии:


1.  Как мне это сделать?   Нужно ли мне создавать класс?   Я уже встроил крючки в функцию стрелки, разве этого недостаточно для компонента React?  


2.  Если возможно, покажите пример, пожалуйста?  


3.  Я отредактировал пост, чтобы привести вам пример, надеюсь, это поможет  


Ответ №3:




вы должны передать «error и setError» своему компоненту ValidateRegister, из которого вы вызвали, или импортировать этот компонент, например:












	Метки: