React UseState 不断地调用 API

Posted 2023-03-17

【中文标题】React UseState 不断地调用 API

【英文标题】：React UseState keeps calling API over and over

【发布时间】：2021-09-13 21:38:03

【问题描述】：

UseEffect 一遍又一遍地调用我的 api。但是，如果我保持一切不变并仅用一个简单的 console.log 替换 axios 调用，那么 UseEffect 只会完成一次。我在导航栏上只包含一个链接，因为这就是创建问题所需的全部内容。

这是我的路由器：

import  BrowserRouter as Router, Switch, Route, Link  from "react-router-dom";
import  Navbar, Nav from 'react-bootstrap';
import Home from './Home.js';
import React from 'react';

  export default function Routing(props) 
     return (
        <>
            <Router>
                <Navbar collapseOnSelect className="navbar">
                    <div className="h-box">
                        <Navbar.Brand>
                            <h1>Portland Watershed Data Dashboard</h1>
                        </Navbar.Brand>
                    </div>
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="ml-auto align-items-center">
                            <Link to="/"><h2 className="big link">Home</h2></Link>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
                <Switch>
                        <>
                            <Route exact path="/">
                                <Home />
                            </Route>
                            <Route exact path="/home">
                                <Home />
                            </Route>
                        </>
                    </Switch>
            </Router>
        </>
    )

这里是 Home 组件的 api 调用：

import  React, useEffect, useState  from "react";
import axios from 'axios';

export default function Home(props) 
    
    const [discharge, setDischargeData] = useState(null);
    useEffect(() => 
        getDischargeData();
        async function getDischargeData() 
             const response = await axios.get("https://waterservices.usgs.gov/nwis/dv/?format=json&indent=on&parameterCd=00060&statCd=00003&sites=14211820,%2014144700,%2014211315,%2014206900,%2014211550"
             );
                   setDischargeData(response.data);
                   console.log(response.data);
        
      , [discharge])
      return (
        <>
            <p>test</p>
        </>
    )

【参考方案1】：

你有一个无限循环： 从回调中的括号中删除参数“discharge”。

useEffect(() => 
        getDischargeData();
        async function getDischargeData() 
             const response = await axios.get("https://waterservices.usgs.gov/nwis/dv/?format=json&indent=on&parameterCd=00060&statCd=00003&sites=14211820,%2014144700,%2014211315,%2014206900,%2014211550"
             );
                   setDischargeData(response.data);
                   console.log(response.data);
        
      , [])
         ^