使用axios与useParams时useEffect无法加载MongoDB产品数据求助

核心问题分析 #

你的代码存在以下几个导致数据加载失败的关键问题：

• useEffect依赖缺失：依赖数组为空，id作为请求参数未被加入依赖项，当id更新（比如路由切换）时不会重新触发请求，甚至初始渲染时id可能还未正确获取就发起了请求。
• 无错误处理机制：请求过程中如果出现网络错误、后端接口报错或MongoDB查询无结果，没有任何捕获和提示，无法快速定位问题。
• 未校验id有效性：如果useParams()返回的id为空或格式不符合MongoDB ObjectId要求，请求会直接失败。

修复后的代码 #

import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';

const ProductScreen = () => {
  const [product, setProduct] = useState({});
  const [error, setError] = useState('');
  const { id } = useParams();

  useEffect(() => {
    const fetchProduct = async () => {
      // 先校验id是否有效
      if (!id) return;

      try {
        const { data } = await axios.get(`/api/product/${encodeURIComponent(id)}`);
        setProduct(data);
        setError('');
      } catch (err) {
        // 捕获并展示错误信息
        setError(err.response?.data?.message || '加载产品数据失败');
        console.error('请求异常:', err);
      }
    };

    fetchProduct();
  }, [id]); // 将id加入依赖数组，确保参数变化时重新请求

  // 根据状态渲染对应内容
  return (
    <div>
      {error && <p className="error-text">{error}</p>}
      {Object.keys(product).length > 0 ? (
        <div>
          <h1>{product.name}</h1>
          {/* 渲染其他产品信息 */}
        </div>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
};

export default ProductScreen;

额外排查建议 #

• 检查后端接口：确认/api/product/:id接口能正确接收参数，并且将传入的id转换为MongoDB的ObjectId类型后再执行查询（避免字符串与ObjectId不匹配导致无结果）。
• 查看浏览器控制台：打开开发者工具的Network面板，检查请求的状态码、请求地址和响应内容，确认请求是否发送成功、后端返回数据是否正常。
• 验证id合法性：确保路由传递的id是MongoDB中存在的文档ID，格式符合24位十六进制字符串的ObjectId要求。

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