I can’t take the information of my result of fetch. Promise

When I try to take the result of my API I can’t. my code:

export async function validLoginFetch(email,password){

    const data = JSON.stringify({ email, password });
    let headers = {
      'Content-Type': 'application/json',
    };
  
    const options = {
      method: 'POST',
      body:data,
      headers:headers,
    }

    return await fetch('http://localhost:1323/profile/valid', options).then(response => {return response.json()})
}

the code that calls the function

    async function validateLogin() {
       if (password !== "" && email !== "") {
          const response = await validLoginFetch(email, password)
          console.log(response)
      }
    };

the full code:

import '../App.css';
import { validLoginFetch } from '../api/user'
import React , { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export default () => {

  const [email, setEmail]  = useState("");
  const [password, setPassword]  = useState("");
  const [validUser, setValidUser]  = useState(false);

async function validateLogin() {
   if (password !== "" && email !== "") {
      const response = await validLoginFetch(email, password)
      console.log(response)
  }
};

  useEffect(()=> {
    if (validUser){
      //useNavigate("/#");

    }
  
  });


  return (
    <div className="login">
      <form onSubmit={validateLogin}>
        <div>
          <span>email</span>
          <input
            onChange={e => setEmail(e.target.value)}
            id="email"
            name="email"
            placeholder=""
          />
        </div>
        <div>
          <span>password</span>
          <input
            onChange={e => setPassword(e.target.value)}
            id="password"
            name="password"
            placeholder=""
          />
        </div>
        <button
          onSubmit={validLoginFetch}
          id="authenticate-user-login"
          className="authenticate-user-login"
        >
          Login
        </button>
      </form>
    </div>
);

}

not return anything. My route works fine. The problem isn’t in the backend.

if I try to delete the async and await, the return is a Promise. If I use the async and await did never return anything. it stays in the validLoginFetch and doesn’t continue. Does someone know what it can be?

Answer

I finded the answer…. we need to refresh the form before send it to fetch… so The problem was the time for refreshing the form, we need to refreshing before send it. To solve this, set to refresh the form on response:

event.preventDefault();

in my case:

resolve put these command before called the function that make the fetch:

async function validateLogin() {
   event.preventDefault();
   if (password !== "" && email !== "") {
      const response = await validLoginFetch(email, password)
      console.log(response)
  }
};

Advertisement

Answer