ReactJS Axios отправляет больше одного запроса

Я чего-то не понимаю... Почему уходит 2 запроса? И как следствие приходит 2 ответа. Что не так?

Вот мой код

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

export function TodoList() {
    const [allTodo, setAllTodo] = useState([]);

    useEffect(() => {
        axios.get(`http://127.0.0.1:8000/api/todo/`)
            .then(response => {
                response.data.forEach((todo) => {
                    setAllTodo(allTodo => [...allTodo, todo]);
                })
            })
            .catch(error => {
                console.log(error)
            })
    }, [])

    return (
        <div className="TodoList">
            {
                allTodo.map((todo, index) => {
                    return <TodoItem key={index} data={todo}/>
                }
            )}
        </div>
    );
}


Ответы (1 шт):

Автор решения: Dmitry Kozlov

useEffect выполняется после каждого рендера.

  • первый рендер происходит с пустым списком []
  • выполняется хук useEffect
  • происходит первый запрос
  • при получении данных выполняется хук setAllTodo
  • данные изменились, поэтому происходит второй рендер
  • выполняется хук useEffect
  • происходит второй запрос
→ Ссылка