Javascript 为什么在react 中多次调用api

发布于07月14日

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

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

这是react应用程序

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在页面加载时被调用了两次

有人能解释为什么吗？

推荐答案

通常，如果您想执行一次，比如在加载页面时从api中提取一些内容，那么应该使用useEffect钩子和空的依赖项数组，如下所示:

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

编辑:这也可能是由<StrictMode>引起的.它旨在使React在开发模式下呈现两次，以便为您提供如何改进代码和挂钩使用的建议.这可能就是你的应用程序渲染两次的原因！