React UseState 不断地调用 API答案

【问题标题】：React UseState keeps calling API over and overReact UseState 不断地调用 API
【发布时间】：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>
        </>
    )

}

【问题讨论】：

标签： rest react-router react-hooks use-effect

【解决方案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);
        }
      }, [])
         ^

【讨论】：