React项目使用axios获取单篇博客详情返回undefined问题求助

AI 小北

2026-9-29

问题原因&解决方案

核心404原因：请求地址不一致
博客列表组件使用环境变量process.env.REACT_APP_API_URL拼接请求地址，指向你实际的后端接口，但详情页直接把请求地址写死为示例域名https://example.com，两个组件请求的后端服务不一致，自然会返回404。
语法错误：组件导出方式非法
详情页代码中export default const BlogDetail = (props) => {}是不被JS支持的写法，export default后不能直接跟变量声明语句，会导致组件加载异常。
调试辅助缺失
所有请求的catch块为空，没有打印错误日志，无法快速定位异常原因。

修正后的详情页代码

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

// 先声明组件再导出
const BlogDetail = (props) => {
    const [blog, setBlog] = useState({});

    useEffect(() => {
        const slug = props.match.params.id;

        const fetchData = async () => {
            try {
                // 替换为和列表页一致的环境变量拼接规则
                const res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/${slug}`);
                setBlog(res.data);
            }
            catch (err) {
                // 新增错误日志打印方便后续调试
                console.error('详情请求错误：', err)
            }
        };

        fetchData();
    }, [props.match.params.id]);

    const createBlog = () => {
        // 新增默认空值避免渲染警告
        return {__html: blog.body || ''}
    };

    const capitalizeFirstLetter = (word) => {
        if (word)
            return word.charAt(0).toUpperCase() + word.slice(1);
        return '';
    };

    return (
        <div>
            <div dangerouslySetInnerHTML={createBlog()} />
        </div>
    );
};

export default BlogDetail;