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
- происходит второй запрос