Проблема с компонентом без повторного рендеринга в приложении React

В вашем коде есть несколько ошибок (ну, не совсем неправильно, но это не «реактивный» способ сделать это).

• Вы объявляете переменные вне вашего компонента React. Это делает его нереактивным, что означает, что React не будет знать, когда он обновится, поэтому не будет повторно отображать компонент.
• Вы также выполняете вызов API вне компонента. Опять же, компонент React не имеет ни малейшего представления о том, что этот вызов выполняется. Что, если вы хотите показать загрузчик во время выполнения этого вызова? Как компонент узнает о своем статусе?
• Кроме того, вы обновляете локально созданную переменную вне функции. область внутри вызова асинхронной функции, в идеале функции не должны обновлять переменную за пределами ее области действия, они должны возвращать некоторую форму данных, которые, в свою очередь, обновляют переменную.

Чтобы исправить ваш компонент, вам нужно узнать, как React ожидает написания ваших компонентов, в основном понимать использование хуков, двумя основными из которых являются useState и useEffect.

Переменные обновления, которые были объявлены с помощью useState, сообщат реакции на повторную отрисовку каждый раз, когда они обнаруживают изменение в этой переменной.

useEffect в основном используется для побочных эффектов, то есть любых операций или поведения, которые происходят в компоненте после рендеринга и не влияют напрямую на текущий цикл рендеринга компонента. Эти побочные эффекты могут включать в себя такие задачи, как получение данных, подписки, ручное изменение DOM или другие взаимодействия с внешним миром.

Подробнее о них можно прочитать на сайте React — https://react.dev/reference/react/hooks

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

import { CityListCard } from "./CityListCard";
import { useState, useEffect } from "react";



const getCities = async () => {
    if (localStorage.getItem('savedCities')) {
        const savedCities = JSON.parse(localStorage.getItem('savedCities')  || '[]')
        const OWMAppId = 'xxxxxxxxxxxxxxxxxxxxx'
        const units = 'metric'
        const langapi = 'en'

        savedCities.map(async (city, index) => {
            const response = await fetch(`https://api.openweathermap.org/data/3.0/onecall?lat=${city.coords.lat}&lon=${city.coords.lng}&exclude = {part}&appid=${OWMAppId}&units=${units}&lang=${langapi}`, {
                headers: {
                    'Accept': 'application/json; charset=UTF-8'
                }
            })
            const data = await response.json()
            savedCities[index].weather = data
        })
    }
}



export function CityList() {
  const [cities, setCities] = useState([]);

  useEffect(() => {
    // make the API call here and set the state
    getCities().then((data) => {
      setCities(data);
    });
  }, []); // dependencies variables are added here to re-run the effect when they change, if 

  return (
    <div className = "flex flex-col gap-4">
      {cities &&
        cities.map((city) => <CityListCard key = {city.id} city = {city} />)}
    </div>
  );
}