使用 Axios 进行 GET 请求后，useState Hook 数组上的 console.log 会记录多次

Question

我有这个反应组件

import React, { useState, useEffect } from 'react';
import axios from "axios";
import "../../css/driversStandings.css";

function DriversStandingsComponent() {

    const [data, setData] = useState([]);
    var row = 1;

    useEffect(() => {
        axios.get("http://localhost:4000/api/standings").then(res => {
            const driversChampionshipData = res.data[0].DriversChampionship
            setData(driversChampionshipData);
            console.log(data)
        })
    });

    return (
          //Here I return a mdbootstrap table, mapping the data array
    )
}

export default DriversStandingsComponent;

我真的不明白为什么会发生这种情况，以及它是否会影响服务器性能。

有解决这个问题的想法吗？我什至不知道这本身是否是一个错误

Answer 1

每次组件重新渲染时都会调用 useEffect。您应该添加空依赖数组，这样 useEffect 仅在组件安装时调用，如下所示：

   useEffect(() => {
        axios.get("http://localhost:4000/api/standings").then(res => {
            const driversChampionshipData = res.data[0].DriversChampionship
            setData(driversChampionshipData);
            console.log(data)
        })
    }, []);