React：useState回调/取数据死循环

Question

如果我运行下面的代码，我会得到一个无限循环（如控制台日志中所示）。我认为发生这种情况是因为我的 useState 回调 (setEvents) 导致重新渲染，导致函数 App 重新运行，然后重新获取数据，再次调用我的 useState 回调等等。此代码基于我在网上看到的大量示例 - 我做错了什么？

import React, {useState, useEffect} from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
import EventMonitorRoute from './routes/event-monitor';
import ReactDOM from 'react-dom';


function App() {

    console.log('Running App'); // DEBUG

    let basename = (window.location.hostname === 'localhost') ? '/' : '/event_monitor';
    let apiURL = 'https://example-api.com';
    const [events, setEvents] = useState(null);

    async function fetchData(apiURL) {
        console.log('fetching data'); // DEBUG
        const response = await fetch(apiURL);
        const json = await response.json();
        setEvents(json);
    }

    useEffect(() => {
        fetchData(apiURL)
    });

    return (
        <Router basename={basename}>
            <div id="app-container-inner">
                <Route exact path="/" render={(props) => <EventMonitorRoute events={events} {...props}/>}/>
            </div>
        </Router>
    );
}

ReactDOM.render(
    <App/>,
    document.getElementById('app-container')
);

Answer 1

将声明移到效果中并传递一个空数组作为第二个参数：

console.log('Running App'); // DEBUG


useEffect(() => {

let basename = (window.location.hostname === 'localhost') ? '/' : '/event_monitor';
let apiURL = 'https://example-api.com';
const [events, setEvents] = useState(null);

async function fetchData(apiURL) {
    console.log('fetching data'); // DEBUG
    const response = await fetch(apiURL);
    const json = await response.json();
    setEvents(json);
}
    fetchData(apiURL)
}, []);

React：useState回调/取数据死循环

React: useState callback / fetching data infinite loop

reactjs

react-hooks