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

Question

[Даниил Чистяков]

Почему при загрузке страницы и выводе в консоль переменной 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;

Answer 1

[y0u]

Потому что setFilms асинхронный.
Чтобы получить обновленный films используй useEffect

useEffect(() => {
    // new films here
}, [films]);

Comments

[Владимир]

еффект не обязателен, если вынести консоль лог из ефекта, он тоже сработает, и в этом коде этого достаточно, но он будет срабатывать не только при изменении films но и при изменении любой пропсы и стейта в компоненте.

[y0u]

Владимир, нужен или нет - это зависит от задачи

[Владимир]

y0u, А я что написал ? В этом куске кода нет пропсов, нет других переменных в стейте, нужно просто посмотреть пришли фильмы или нет. ДЛя данной конкретной задачи сработает без ефекта, если нужно отследить изменение конкретной переменной, нужен ефект.

[Даниил Чистяков]

y0u, Владимир, простого вынесения хватило, спасибо большое за помощь!

Answer 2

[Mikhail Osher]

Если отвечать на оригинальный вопрос, то вызов setFilms не моментально обновляет переменную films (React батчит обновление на следующий тик ивентлупа) + значение films находится в замыкании.

Answer 3

[Alice]

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;

Comments

[Даниил Чистяков]

да, но тогда у меня fetch повторяется бесконечно

[Alice]

Даниил Чистяков, вынеси его за useEffect. Мне всё за тебя нужно было сделать?

[Даниил Чистяков]

import React, { useEffect, useState } from "react";

const App = () => {
  const [films, setFilms] = useState([]);
  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": "ceff3505-c77c-450a-8abb-aa29f638f5ee"
        }
      }
    );
    const result = await response.json();
    setFilms(result);
    console.log(films);
  };

  useEffect(() => {Fetch();}, [films]);
  return <div></div>;
};

export default App;

Имеешь ввиду так сделать? Если да, то это не помогло.

[Alice]

Даниил Чистяков, я твою задачу

(выводится просто [], а нужен массив из API)

выполнила, дальше давай уж сам, научись думать. Ты не на фрилансе :)

[Владимир]

Alice, Охренительная подсказка, на 5, направление правильное, но реализация мимо
Даниил Чистяков, Почитай внимательно доку про Ефект и про стейт
Идея у Alice правильная, только твой хук оставь как был, а консоль лог в отдельном ефекте выводи, у которого зависимость [films]
Ну или банально вынеси console log из ефекта и просто перед ретурном поставь.

https://reactjs.org/docs/hooks-reference.html

[Mikhail Osher]

[films] не нужно

[Даниил Чистяков]

Владимир, Mikhail Osher, спасибо большое за помощь!