La operación getCurrentWeather es asíncrona . Entonces, en este caso, debe await una serie de operaciones para obtener sus resultados antes de poder establecer esos resultados en un valor de estado.

En un useEffect que podría verse así:

 useEffect(() => { const fetchWeather = async () => { // begin the asynchronous operations const promises = favoriteCards.map(card => accuWeatherApi.getCurrentWeather(card.key)); // wait for all of them to complete const results = await Promise.all(promises); // update state with the results setRenderFavorites(results); } fetchWeather(); }, [favoriteCards]);

Aunque, como puede imaginar, hay una variedad de formas de hacer esto. Por ejemplo, el código anterior realiza todas las operaciones asincrónicas de inmediato y los resultados estarán en el orden en que terminen. Si necesita que estén en el mismo orden, puede await cada operación de una en una. Por ejemplo:

 useEffect(() => { const fetchWeather = async () => { const results = []; // await each operations in order for (const card of favoriteCards) { results.push(await accuWeatherApi.getCurrentWeather(card.key)); } // update state with the results setRenderFavorites(results); } fetchWeather(); }, [favoriteCards]);

Tenga en cuenta que, en cada caso, la función que se pasa a useEffect en sí misma no es async . Pero dado que se deben esperar las operaciones asíncronas, internamente esa función define una función que es async y luego invoca esa función. Interno a esa función es donde await las operaciones.

Aparte, también vale la pena señalar que hubo un segundo problema en su código... La sintaxis de su uso de .map() explícitamente no devuelve nada. Cuando se usan llaves en la función que se pasa a .map() , entonces no hay devolución predeterminada y debe return explícitamente un valor. Entonces, incluso si estuviera esperando las operaciones o si no fueran asincrónicas en primer lugar, aún estaría undefined porque no hay un valor de retorno.