主页 / 问题 / 1421053
Accepted
Rasim
Asked:2022-08-17 04:11:31 +0000 UTC2022-08-17 04:11:31 +0000 UTC

ReactJS Axios 发送多个请求

  • 772

我不明白一些事情......为什么有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>
    );
}
reactjs axios

1 个回答

  1. Best Answer

    useEffect 在每次渲染后执行。

    • 第一次渲染发生在一个空列表中[]
    • 执行 useEffect 挂钩
    • 第一个请求发生
    • 当接收到数据时，执行 setAllTodo 钩子
    • 数据已更改，因此发生第二次渲染
    • 执行 useEffect 挂钩
    • 第二个请求发生
    • 0

相关问题