Почему вызов React Hooks Axios API возвращается дважды?

Question

Почему React Hooks Axios API Call возвращается дважды ... даже с проверкой, загружен ли он?

Я привык к this.setState, но пытаюсь понять причину этого, почему он дважды появляется в моем журнале консоли.

Мой код:

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

const App = () => {
  const [users, setUsers] = useState({ results: [] });
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);

      await axios
        .get("https://jsonplaceholder.typicode.com/users/")
        .then(result => setUsers(result));

      setIsLoading(false);
    };

    fetchData();
  }, []);

  console.log(
    users.status === 200 && users.data.map(name => console.log(name))
  );

  return <h2>App</h2>;
};

export default App;

Answer 1

Это на самом деле нормальное поведение.Именно так работают функциональные компоненты с помощью useEffect ().В компоненте класса ключевое слово "this" видоизменяется при изменении состояния.В функциональных компонентах с хуками функция вызывается снова, и каждая функция имеет свое собственное состояние.Поскольку вы обновили состояние дважды, функция была вызвана дважды.

Вы можете прочитать эти 2 в очень углубленных статьях одного из создателей реакционных хуков для получения более подробной информации.

https://overreacted.io/a-complete-guide-to-useeffect/

https://overreacted.io/how-are-function-components-different-from-classes/

Answer 2

Для пожара дважды, возможно, один раз из componentDidMount, а другой из componentDidUpdate

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

Запускается ли useEffect после каждого рендера? Да! По умолчанию он запускается как после первого рендера, так и после каждого обновления. (Позже мы поговорим о том, как это настроить.) Вместо того, чтобы думать в терминах «монтирования» и «обновления», вам может показаться, что вам будет легче думать, что эффекты происходят «после рендеринга». React гарантирует, что DOM был обновлен к моменту запуска эффектов.

Вы не проверяли isLoading перед тем, как запустить API-вызов

    // Only load when is not loading
    if (!isLoading) {
        fetchData();
    }