danielchistyakov
@danielchistyakov
Frontend Developer

Почему значения хуков не переприсваиваются?

Почему при загрузке страницы и выводе в консоль переменной films я вижу её значение из useState, а не результат после setFilms(result); (выводится просто [], а нужен массив из API).
Мой код:
import React, { useEffect, useState } from "react";

const App = () => {
  const [films, setFilms] = useState([]);
  useEffect(() => {
    const Fetch = async () => {
      const response = await fetch(
        "https://kinopoiskapiunofficial.tech/api/v2.2/films/top?type=TOP_AWAIT_FILMS&page=1",
        {
          headers: {
            "X-API-KEY": "i'm sorry :)"
          }
        }
      );
      const result = await response.json();
      setFilms(result);
      console.log(films);
    };
    Fetch();
  }, []);
  return <div></div>;
};

export default App;
  • Вопрос задан
  • 106 просмотров
Решения вопроса 2
y0u
@y0u
dev
Потому что setFilms асинхронный.
Чтобы получить обновленный films используй useEffect
useEffect(() => {
    // new films here
}, [films]);
Ответ написан
miraage
@miraage
Если отвечать на оригинальный вопрос, то вызов setFilms не моментально обновляет переменную films (React батчит обновление на следующий тик ивентлупа) + значение films находится в замыкании.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
w3bsmes
@w3bsmes
Куратор тега «Глупые вопросы»
import React, { useEffect, useState } from "react";

const App = () => {
  const [films, setFilms] = useState([]);
  useEffect(() => {
    const Fetch = async () => {
      const response = await fetch(
        "https://kinopoiskapiunofficial.tech/api/v2.2/films/top?type=TOP_AWAIT_FILMS&page=1",
        {
          headers: {
            "X-API-KEY": "i'm sorry :)"
          }
        }
      );
      const result = await response.json();
      setFilms(result);
      console.log(films);
    };
    Fetch();
  }, [films]);
  return <div></div>;
};

export default App;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы