为什么fetch在react中多次调用api？

Question

我有一个非常基本的 api，它所做的就是返回文本“Sunny day”。

我使用 create React app 创建一个 React 项目，并尝试调用 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 在开发模式下渲染两次，以便它可以为您提供有关如何改进代码和挂钩使用的建议。这可能就是您的应用程序渲染两次的原因！