Почему не выходит вывести данные на старницу по Апи?

Question

[Bart Simpson]

Мне приходят данные по апи (обьект) и я их заношу в стейт а потом хочу вывести их на страницу но почему-то получаю ошибку.

const [data, setData] = useState({});

  const fetchApi = (e: any) => {
    e.preventDefault();
    setLoading(true);
    axios.get(url).then((res) => {
      setData(res.data);
      console.log(data); // В консоль приходят необходимые данные 
    });
  };

 <h2>{data.weather[0]}</h2> // подсвечивается weather с ошибкой "any
Property 'weather' does not exist on type '{}'."

В чем я допустил ошибку? Раз в консоль все приходит значит фетчится все нормально...

Вот обьект:

{
    "coord": {
        "lon": -85.1647,
        "lat": 34.257
    },
    "weather": [
        {
            "id": 804,
            "main": "Clouds",
            "description": "overcast clouds",
            "icon": "04d"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 290.84,
        "feels_like": 290.6,
        "temp_min": 288.46,
        "temp_max": 292.76,
        "pressure": 1009,
        "humidity": 74
    },
    "visibility": 10000,
    "wind": {
        "speed": 3.09,
        "deg": 200
    },
    "clouds": {
        "all": 100
    },
    "dt": 1673464267,
    "sys": {
        "type": 2,
        "id": 2009938,
        "country": "US",
        "sunrise": 1673441225,
        "sunset": 1673477370
    },
    "timezone": -18000,
    "id": 4219762,
    "name": "Rome",
    "cod": 200
}

Comments

[Falser]

Ошибка появляется раньше чем ответ на запрос в консоли?

[Bart Simpson]

Falser, ошибки в консоли нет, просто данные не выводятся

Answer 1

[Just Me]

реакт сначала рендерит компонент, где:

1. отправляет запрос на сервер
2. видит пустой объект data, где не существует свойства weather. Выбрасывается ошибка
3. после уже приходят данные с сервера и он рендерит компонент ещё раз

минимальное решение

<h2>{data?.weather?.[0]}</h2>

Comments

[Bart Simpson]

Такая же ошибка

Property 'weather' does not exist on type '{}'

[Just Me]

пришли скриншот ошибки, где ты её нашёл. Он не может в моём коде её вывести. Он выведет там undefined

Залей в песочницу и покажи интерактивный пример

[Bart Simpson]

Just Me, https://codepen.io/IvaLu/pen/ExpmvEY?editors=0010

[Just Me]

это ошибка Тайпскрипта

тебе надо типизировать данные которые ты получаешь с сервера (весь объект) и прописать сюда вместо any

const [data, setData] = React.useState<any>({});

хотя any тоже будет работать, но это коряво с точки зрения Тайпскрипта

[Just Me]

const [data, setData] = React.useState<any>({});

или

const [data, setData] = React.useState({} as any);

[Bart Simpson]

Just Me, про типизацию действительно забыл но теперь получаю другую ошибку:

[Just Me]

ты выводишь сырой объект. Сериализуй выводимые данные

<h2>{JSON.stringify(data?.weather?.[0])}</h2>

или выводи отдельное свойство. К примеру

<h2>{data?.weather?.[0].main}</h2>

[Bart Simpson]

Just Me, благодарю за помощь!
Может еще подскажешь, я хочу типизировать данные с сервера чтоб все было красиво, конвертнул json в ts интерфейсы и задал стейту:

const [data, setData] = React.useState<IData[]>([]);

Но теперь ловлю ошибку:

<h2>{data?.weather?.[0].main}</h2> //Property 'weather' does not exist on type 'IData[]'.

С интерфейcами вроде все гуд:
https://codepen.io/IvaLu/pen/ExpmvEY?editors=0010

[Just Me]

например

<h2>{data?.weather?.[0]?.main}</h2>

у тебя разве данные в массиве? судя по тому, что я вижу должно быть так

const [data, setData] = React.useState<IData>();

Answer 2

[luxurypluxury]

Попробуй вот так сделать:

useEffect(() => {
  (async () => {
            try {
                setIsLoading(true);
                const {data} = await axios.get(url);
                setData(data);
                setIsLoading(false);
            } catch (error) {
                alert('Ошибка при запросе данных :(');
                console.error(error);
            }
        })();

}, [])

Comments

[Bart Simpson]

У меня запрос на сервер происходит когда юзер нажимает на кнопку, мне юзефект не нужен. Переделал с использованием async + блок try/catch - не помогло