使用useEffect无法从API获取数据的排查求助

我正在学习全栈应用教程，尝试通过useEffect结合基于axios的自定义useFetch钩子从countByType接口获取数据，但始终失败，卡在此问题多时。

相关代码 #

1. 自定义useFetch钩子 #

import { useState, useEffect } from 'react';
import axios from 'axios';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(url);
        setData(response.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

2. 后端countByType接口（Express示例） #

const express = require('express');
const router = express.Router();
const YourModel = require('../models/YourModel');

router.get('/countByType', async (req, res) => {
  try {
    const counts = await YourModel.aggregate([
      { $group: { _id: '$type', count: { $sum: 1 } } }
    ]);
    res.status(200).json(counts);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

module.exports = router;

3. 前端渲染组件 #

import React, { useEffect } from 'react';
import useFetch from './useFetch';

const StatsComponent = () => {
  const { data, loading, error } = useFetch('/api/countByType');

  useEffect(() => {
    if (data) {
      console.log('获取到的数据:', data);
    }
  }, [data]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error}</div>;

  return (
    <div>
      <h2>按类型统计</h2>
      {data && data.map(item => (
        <div key={item._id}>
          {item._id}: {item.count}
        </div>
      ))}
    </div>
  );
};

export default StatsComponent;

报错截图 #

解决步骤 #

1. 验证API接口可用性 #

直接在浏览器/Postman中访问接口完整地址（如http://localhost:5000/api/countByType），确认：

• 是否返回200状态码和预期的JSON数据
• 若返回500，查看后端控制台日志，排查数据库查询、模型定义等问题
• 若返回404，检查接口路由路径是否与后端配置一致

2. 排查跨域问题 #

如果前端（如localhost:3000）和后端（如localhost:5000）端口不同，需在后端配置CORS：

// Express中安装并引入cors中间件
const cors = require('cors');
app.use(cors());

3. 完善useFetch的错误排查 #

修改钩子的catch块，打印完整错误信息，方便定位问题：

catch (err) {
  // 输出完整错误详情
  setError(JSON.stringify(err, Object.getOwnPropertyNames(err)));
  console.error('请求错误:', err);
}

同时确认请求URL是否正确：若前后端不同域，需使用完整地址（如http://localhost:5000/api/countByType）而非相对路径。

4. 检查组件数据处理逻辑 #

在组件中添加日志，确认useFetch返回的状态：

console.log('useFetch状态:', { data, loading, error });

若data始终为null，检查后端返回的数据格式是否与组件期望的一致（比如是否为数组、是否包含_id和count字段）。

5. 查看浏览器网络请求详情 #

打开浏览器控制台的Network标签，查看请求：

• 状态码：401/403需检查身份认证，400需检查请求参数
• 请求头：确认是否携带必要的认证信息（如token）
• 响应内容：查看后端返回的具体错误信息

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