Estoy tratando de pasar la URL a la función asíncrona y luego tomando su respuesta e intentando usar su valor, pero aquí la respuesta no está definida y espera sin esperar hasta que el valor esté disponible. ¿Cuál es la razón de esto y cómo puede resolver esto?
const AuthForm = () => { const [isLogin, setIsLogin] = useState(true); const [signupError, setSignupError] = useState(""); const dispatch = useDispatch(); const emailRef = useRef(); const passwordRef = useRef(); const switchAuthModeHandler = () => { setIsLogin((prevState) => !prevState); }; const submitHandler = (e) => { e.preventDefault(); const email = emailRef.current.value; const password = emailRef.current.value; const dbconnect = async (URL) => { fetch(URL, { method: "POST", body: JSON.stringify({ email: email, password: password, returnSecureToken: false, }), }) .then((res) => { if (res.ok) return res; else throw new Error("Failed"); }) .catch((err) => { console.log("setted Error"); setSignupError(err); }); }; (async () => { if (isLogin) { const response = await dbconnect( "https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyDXTW7owM4V9xy6RuUz8fI4nRKPcX-a2SU" ); await response.then(dispatch(sliceActions.login(response.idToken))); } else { const response = await dbconnect( "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyDXTW7owM4V9xy6RuUz8fI4nRKPcX-a2SU" ); } })(); };dbConnect está marcado como async , por lo que devuelve una promesa. Llama asincrónicamente a fetch (sin await ), luego llega al final de la función sin presionar una declaración de return , por lo que resuelve la promesa como undefined .
Vuelva a escribir su llamada a fetch para usar await y try/catch en lugar de .then y .catch . Devuelve el resultado final.
Creo que olvidaste devolver un resultado en el método dbconnect . Prueba con el siguiente código:
const dbconnect = async (URL) => { return await fetch(URL, { method: "POST", body: JSON.stringify({ email: email, password: password, returnSecureToken: false, }), }) .then((res) => { if (res.ok) return res.json(); else throw new Error("Failed"); }) .catch((err) => { console.log("setted Error"); setSignupError(err); return null; }); };Y de otra manera:
const dbconnect = async (URL) => { try { return await fetch(URL, { method: "POST", body: JSON.stringify({ email: email, password: password, returnSecureToken: false, }), }).then((result) => result.json()); } catch(error) { console.log("setted Error"); setSignupError(error); return null; } };Creo que te olvidas de la devolución.
También las siguientes líneas:
if (isLogin) { const response = await dbconnect("your-url"); await response.then(dispatch(sliceActions.login(response.idToken))); } else { const response = await dbconnect("your-url"); } La response ya tiene el resultado de la solicitud, por lo que no necesita usar .then para enviar el envío, así que creo que puede usar el siguiente código.
if (isLogin) { const response = await dbconnect("your-url"); await dispatch(sliceActions.login(response.idToken)); } else { const response = await dbconnect("your-url"); }Espero que te ayude.