Почему не срабатывает async await?

Question

[maria_91]

Прописываю авторизацию на сайте и хочу проверить существуют ли уже такие пользователи. Для этого делаю асинхронный Get-запрос и хочу сравнить то, что приходит с сервера с тем, что написано в input(value). Но при запуске функции проверки данные с сервера возвращаются поздее, чем выполняется сама функция. Такие образом функция видит пустой массив и не получается проверить.

import React,{useCallback, useState} from 'react'
import { useNavigate } from "react-router-dom";
import { createNewUsers } from '../../services/createNewUser';
import { serviceUsers } from '../../services/getUsers.service';


function SignUp() {
    const navigate = useNavigate();
    const [existUser,setExistUser]= useState([])
    const [valueMail, setValueMail] = useState('')
    const [valuePassword, setValuePassword] = useState('')
    const [valuePassword1, setValuePassword1] = useState('')

    function checkUser(){
        existUser.map(item=>
            {if(item.mail===valueMail)console.log(true)})
    }

    const HandleSignUp = async (e, mail, password,) => { 
        e.preventDefault()
        const fetch1 = async ()=>{
            try{
              const users = await serviceUsers.getUsersArr()
              setExistUser(users)
              fetch()
            }
            catch(error){
              alert(error)
            }
          }
          await fetch1()
          


        if(valuePassword === valuePassword1){
            const fetch = async ()=>{
                try{
                   await createNewUsers.newUser(mail,password)
                    alert('Готово')            
                    setValueMail('')
                    setValuePassword('')
                    setValuePassword1('')
                    navigate('/login')
                }catch(error){
                    alert("Упс, что-то пошло не так", error)
            }}
         }
             else {
             alert("Пароли не совпадают")
         }
        
}

  return (
    <div >
            <h2>Регистрация</h2>
                <form >
                <span>Электронная почта</span>
                <input onChange={e=>setValueMail(e.target.value)} value={valueMail} type="email" />

                <span> Пароль</span>
                <input onChange={e=>setValuePassword(e.target.value)} value={valuePassword} type="password" />

                <span>Подтвердите пароль</span>
                <input onChange={e=>setValuePassword1(e.target.value)} value={valuePassword1} type="password" />
                
                <button onClick={(e)=>HandleSignUp(e,valueMail,valuePassword)}>Зарегистрироваться</button>
                </form>
      </div>
  )
}

export default SignUp;

Answer 1

[Bart Simpson]

Если вам нужно получить данные с сервера в первую очередь, то попытайтесь использовать useEffect.
К примеру:

React.useEffect(() => {
    fetchApi();
  }, []);

async function fetchApi(){}

Comments

[maria_91]

у меня подгрузка идет после нажатия на кнопку, useEffect мне не подходит... проблема в асинхронности... очередность не срабатывает