React中点击按钮触发多次Fetch GET请求问题求助

我在开发一个简单的React网站，期望点击按钮时通过Fetch API向Node.js服务器发送一次GET请求，但实际每次点击按钮都会固定触发3次请求。以下是相关代码和服务器控制台截图，寻求解决办法。

React代码 #

import { Stack, Button } from '@mui/material';
import './App.css';

function On(){
  fetch("192.168.1.23:5000/on");
}

function App() {
  return (
    <div className="App">
    <div className='App-div'>
      <header className="App-header">
          <Stack spacing={2}>
            <Button onClick={On} size="large" variant='contained'>Send</Button>
          </Stack>
      </header>
      </div>
    </div>
  );
}

export default App;

Node.js服务器代码 #

const express = require("express");
const app = express();

app.get("/on", (req, res) => {
    console.log("Request");
});

app.listen(5000, () => {console.log("Server Started on Port 5000")});

服务器控制台截图 #

解决方法 #

1. 修复服务器未返回响应的问题 #

服务器端的/on路由只打印日志但没有向客户端返回任何响应，浏览器会因请求无结果而自动重试，这是触发多次请求的主要原因。修改服务器代码，添加响应返回：

app.get("/on", (req, res) => {
    console.log("Request");
    res.sendStatus(200); // 返回200状态码告知请求成功
    // 也可根据需求返回具体数据：res.json({message: "Request received"})
});

2. 检查React StrictMode（开发环境专属问题） #

React 18的开发环境中，<StrictMode>会强制组件和副作用执行两次，可能导致点击事件逻辑重复触发。如果你的index.js中用了StrictMode包裹App，可临时移除测试：

// 修改前的index.js
ReactDOM.createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

// 修改后
ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
);

注：StrictMode仅在开发环境生效，生产环境不会有此问题，但优先解决服务器响应问题更关键。

3. 修正Fetch请求的URL格式 #

你的Fetch URL缺少http://协议头，可能导致浏览器解析错误引发异常重试，补充协议头：

function On(){
  fetch("http://192.168.1.23:5000/on");
}

内容的提问来源于stack exchange，提问作者Isaac Johnson