javascript - 使用 React Hooks 时控制台日志显示超出预期

Question

我正在尝试从 Api 获取数据。我得到了所需的结果，但是当我尝试控制台记录它时，它是控制台记录 4 次。

这是我app.js使用 fetchData 的地方。

import React, {useEffect, useState} from 'react';
import styles from './App.modules.css';
import {Header, Cards, Footer, Map, Table, Statecards} from './components/exports';
import {fetchData} from './api';

function App() {

  const [data, setData] = useState({});

  useEffect(() => {
     const settingData =  async () => {
      const data = await fetchData();
      setData(data);
    }     
    settingData();
    }, []);

 console.log(data); 


  return <div className = {styles.container}>
         <Header />
         </div>

  ;
}

export default App;

这是 fetchData 函数

import axios from 'axios';

const url = 'https://api.covid19india.org/data.json';

export const fetchData = async () => {
try{
    const response = await axios.get(url);
    return response;
}
catch(err){ 
    console.log(err);
}   
};

app.js 中的 console.log 给出了 4 个控制台日志，如下所示

我无法弄清楚出了什么问题。

标签： javascriptreactjsreact-hooks

Answer 1

  const settingData = async () => {
      const data = await fetchData();
      setData(data);
  }     
  useEffect(() => {
    settingData();
  }, []);

试试这个。