ReactJS Fetch 调用一次但多个请求退出

Question

这是我之前 post 的重写，因为我能够使用更简单的示例重现相同的问题。

我使用 npx create-react-app 创建了一个简单的应用程序。我将日志记录逻辑添加到我的 App.js 文件中，如下所示。

import logo from './logo.svg';
import './App.css';

function App() {
  console.log("###? App()");

  const logStuff = () => {
    console.log("###? Logging stuff")
    fetch("https://httpbin.org/post", {
      method: 'POST',
      body: JSON.stringify({error: "hello", message: "there"}),
    })
      .then(() => console.log('###? useLog() response'))
      .catch((error) => {
        console.error('###? Failed to send log with error: ' + error);
      });
  }

  return (
    <div className="App">
      {logStuff()}
      <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;

当我启动应用程序时，我得到以下日志：

###? App() App.js:5
###? Logging stuff App.js:8
###? useLog() response App.js:9
###? useLog() response

在网络选项卡中，我看到以下内容：

App() 函数被调用一次。 logStuff() 函数被调用一次；但在网络控制台中，我可以看到有两个请求发往 URL，但我不明白为什么。

Answer 1

您已将 logStuff 函数放入 return 语句中，这就是您遇到此行为的原因。请记住，一个好的做法是组件的 return 语句应该只 return JSX/Components 并且不应该用于任何调用。如果你是运行 return 语句中的一个函数，它应该 return JSX/Component.

这是正确的方法。

import './App.css';

function App() {
  console.log("###? App()");

  useEffect(() => {
     logStuff() //this should be regular practice for side effects
  },[]) //useEffect would run once only. If you want to change it on condition then provide other arguments to the array.

  const logStuff = () => {
    console.log("###? Logging stuff")
    fetch("https://httpbin.org/post", {
      method: 'POST',
      body: JSON.stringify({error: "hello", message: "there"}),
    })
      .then(() => console.log('###? useLog() response'))
      .catch((error) => {
        console.error('###? Failed to send log with error: ' + error);
      });
  }

  return (
    <div className="App">
      // {logStuff()} this was the problem, the function was calling on each render
      <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;

ReactJS Fetch 调用一次但多个请求退出

ReactJS Fetch Called Once But Multiple Requests Go Out

javascript

fetch

reactjs