Soy nuevo en React y estoy tratando de llamar a una async function , pero obtengo la Unexpected reserved word 'await'. ERROR
Entonces, mi función asíncrona está en una Helper class que se supone que debe hacer todas las llamadas a la API, y estoy llamando a esta Helper class en mi Game function
Aquí está mi código de Class Helper :
class Helper { constructor() { this.state = { movieAnswer: {}, profile_path:"", poster_path:"", myInit: { method: "GET", mode: "cors" } } } fetchMovieFunction = async (randomMovie) => { return new Promise((resolve) => { fetch(`${MOVIE_KEY}${randomMovie}?api_key=${API_KEY}`, this.myInit) .then(error => resolve({ error })) .then(response => resolve({ poster_path: response.poster_path })); }); } y aquí es donde llamo fetchMovieFunction en mi game function :
const helper = new Helper(); function Game() { useEffect(() => { setRandomMovie(Math.floor(Math.random() * (500 - 1) + 1)); const { poster_path, error } = await helper.fetchMovieFunction(randomMovie) if (error) return console.log({error}); setApiMovieResponse({poster_path}) }, [page]); return (); } Y no entiendo por qué en esta línea const { poster_path, error } = await helper.fetchMovieFunction(randomMovie) obtengo la Unexpected reserved word 'await'. Error como mi función no se declara como una función asíncrona
dos cuestiones:
Deberías usar await dentro de una función asíncrona
Pero la devolución de llamada pasada a useEffect no debe ser asíncrona. Entonces, puede crear un IIFE y hacerlo asíncrono:
useEffect(() => { (async () => { setRandomMovie(Math.floor(Math.random() * (500 - 1) + 1)); const { poster_path, error } = await helper.fetchMovieFunction(randomMovie); if (error) return console.log({ error }); setApiMovieResponse({ poster_path }); })(); }, [page]);La devolución de llamada en sí no debería ser asíncrona porque eso haría que la devolución de llamada devolviera una promesa y React espera una función no asíncrona que normalmente se usa para hacer algo de limpieza.
Necesariamente deberá envolver la lógica de devolución de llamada del gancho en una función async e invocarla. Las devoluciones de llamada de gancho de reacción no pueden ser asíncronas, pero pueden llamar a funciones asíncronas.
Además, dado que las actualizaciones de estado de React se procesan de forma asincrónica, no puede establecer el valor de randomMovie y esperar usarlo en la siguiente línea en el mismo ámbito de devolución de llamada. Divida esto en un useEffect separado para establecer el estado de randomMovie cuando se actualice la dependencia de la page , y use randomMovie como la dependencia para el efecto principal.
useEffect(() => { setRandomMovie(Math.floor(Math.random() * (500 - 1) + 1)); }, [page]); useEffect(() => { const getMovies = async () => { // <-- declare async const { poster_path, error } = await helper.fetchMovieFunction(randomMovie); if (error) { console.log({error}); } else { setApiMovieResponse({poster_path}); } }; if (randomMovie) { getMovies(); // <-- invoke } }, [randomMovie]); fetch ya devuelve una Promesa, por lo que envolverlo en una Promesa es superfluo. Dado que está devolviendo la cadena Promise, tampoco hay nada que esperar. Puede devolver la fetch ( y la cadena Promise ).
fetchMovieFunction = (randomMovie) => { return fetch(`${MOVIE_KEY}${randomMovie}?api_key=${API_KEY}`, this.myInit) .then(response => return { poster_path: response.poster_path }) .catch(error => return { error }); }Para hacerlo, no se sugiere asynchronize una función como una función de devolución de llamada que se usa en useEffect() ya que las devoluciones de llamada de efectos son síncronas para evitar condiciones de carrera.
el mejor enfoque sería dentro de la devolución de llamada useEffect
mira esto:
useEffect(() => { async function [name] () { ..... ..... } [name](); },string[])