为什么在反应中多次调用api？

Question

我有一个非常基本的 api，它所做的只是返回文本“晴天”。

我使用 create react app 创建了一个反应项目，并尝试调用一次 api，然后将结果打印到控制台。

这是反应应用程序

 import logo from './logo.svg'; import './App.css'; function App() { fetch('https://localhost:44386/weatherforecast') .then(response => response.text()) .then(data => console.log(data)); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;

问题是 api 在页面加载时被调用了两次

谁能解释为什么？

Answer 1

一般来说，如果你想执行一次，比如在加载页面时从 api 获取一些东西，你应该使用带有空依赖数组的useEffect钩子，如下所示：

React.useEffect(
 () => {
         fetch('https://localhost:44386/weatherforecast')
         .then(response => response.text())
         .then(data => console.log(data));
 }, []) // <--- empty dependency array

编辑：这也可能是由<StrictMode>引起的。 它旨在使 React 在开发模式下渲染两次，以便它可以为您提供有关如何改进代码和钩子使用的建议。 这可能就是您的应用渲染两次的原因！

Answer 2

原因是您可能安装了服务工作者。 尝试运行程序
yarn start --no-service-worker或
npm start --no-service-worker

Answer 3

该 API 被调用了两次，因为您的应用程序出于某种原因呈现了两次。 为什么组件渲染两次是另一个问题，您可能会在此SO 线程中找到答案。

由于每次组件呈现时都会以这种方式调用端点，因此将进行 API 调用。 为避免这种情况，您可以在 useEffect 中添加 API 调用，并使其仅在组件第一次呈现时运行。 （更多关于 useEffect ）

useEffect(() => {
  fetch('https://localhost:44386/weatherforecast')
    .then(response => response.text())
    .then(data => console.log(data));
}, []);