React中用fetch()无法获取端点数据：无报错且控制台无输出

针对你在Dashboard类组件中使用fetch请求http://localhost:8081无输出、无错误的情况，按以下步骤排查和修复：

1. 先确认请求是否真的发送 #

打开浏览器开发者工具（F12）→ 切换到Network标签，刷新页面后查看是否有http://localhost:8081的请求：

• 如果没有该请求：检查组件是否被正确渲染（比如路由配置是否正确，Dashboard组件是否被挂载）。
• 如果有请求但状态码异常（比如404、500）：fetch不会将HTTP状态错误视为Promise拒绝，所以不会进入catch，需要手动处理。

2. 修复fetch的错误处理逻辑 #

原代码中没有处理HTTP状态错误，且缺少对response的有效性校验。修改componentDidMount中的fetch代码：

componentDidMount() {
  fetch('http://localhost:8081', {
    method: 'GET',
    mode: 'cors',
  })
  .then((response) => {
    // 先判断请求是否成功
    if (!response.ok) {
      throw new Error(`HTTP错误！状态码：${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log('获取到的数据：', data);
    // 更新state以渲染数据
    this.setState({
      items: data,
      DataisLoaded: true
    });
  })
  .catch((err) => {
    console.error('请求失败：', err);
  });
}

3. 清理无用代码 #

类组件不需要导入useState和useEffect，删掉这行冗余导入：

// 移除该行
import { useState, useEffect } from 'react';

4. 检查后端CORS配置 #

如果Network中显示CORS相关错误（跨域被阻止），需要在localhost:8081后端服务中配置CORS，允许前端域名的请求。比如Node.js/Express可使用cors中间件，Java Spring可添加CORS配置类。

5. 确认后端服务正常运行 #

直接在浏览器地址栏访问http://localhost:8081，验证是否能返回预期的JSON数据。如果浏览器访问也无响应，说明后端服务未启动或端口配置错误。

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