无法使用 axios 在响应中检索单个博客答案

【问题标题】：Unable to retrieve individual blog in react using axios无法使用 axios 在响应中检索单个博客
【发布时间】：2021-12-10 02:27:57
【问题描述】：

我花了一些时间试图弄清楚为什么我无法使用 axios 获取单个博客文章详细信息页面。该代码不返回任何数据（它返回未定义）我有以下代码：

/public
/src
    /components
        /blog
            BlogPosts.js
            BlogDetail.js
            ... 
    App.js
       import BlogDetail from './components/blog/BlogDetail';
   
The routing for the DETAIL_POST is:
<Route exact path='/blog/:id' component={BlogDetail} />

DETAIL_POST COMPONENT

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

export default const BlogDetail = (props) => {
    const [blog, setBlog] = useState({});

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

        const fetchData = async () => {
            try {
                const res = await axios.get(`https://example.com/blog/${slug}`);
                setBlog(res.data);
            }
            catch (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>
    );
};

博文组件

const Blog = () => {
    const [blogs, setBlogs] = useState([]);

    useEffect(() => {
        const fetchBlogs = async () => {
            try {
                const res = await axios.get(`${process.env.REACT_APP_API_URL}/blog/post`);
                setBlogs(res.data);
            }
            catch (err) {

            }
        }

        fetchBlogs();
    }, []);
const getBlogs = () => {
        let list = [];
        let result = [];
        
        blogs.map(blogPost => {
            return list.push(
                <div className="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                    
                        <p className="card-text mb-auto">{blogPost.introduction}</p>
                        <Link to={`/blog/${blogPost.slug}`} className="stretched-link">Read More</Link>
           
                </div>
            );
        });

        for (let i = 0; i < list.length; i += 2) {
            result.push(
                <div key={i} className='row mb-2'>
                    <div className='col-md-6'>
                        {list[i]}
                    </div>
                    <div className='col-md-6'>
                        {list[i+1] ? list[i+1] : null}
                    </div>
                </div>
            )
        }

        return result;
    };
return (
    <div className="jumbotron p-4 p-md-5 text-white rounded bg-dark">
        {getBlogs()}
    </div>
    );
};

export default Blog;

在检查浏览器控制台时，我看到了这个错误：Failed to load resource: the server responded with a status of 404 (Not Found)，但我找不到错误所在，因为除了特定组件之外，其他组件正在返回数据。该代码为我练习的人返回数据，但在我的情况下从未工作过，但一切似乎都与他们的相似。

【问题讨论】：

两件事：(1) 路由路径是否定义为具有id 匹配参数？ (2) 是否提出请求？检查网络选项卡。您可以更新您的问题以包含您的路由代码吗？路由器，渲染此 blog_detail 的代码（应该是 *CamelCased，顺便说一句，因为它是 React 组件*），以及您如何链接到此路由？
@Drew 我已通过必要的调整更新了帖子。我也添加了路由。此外，该组件没有返回任何数据。请问还有什么可能导致错误？
您是否还检查了网络选项卡以确保您正确地发出请求？网络选项卡中的响应是什么？ fetchData 函数中res.data 的值是多少？ blog 状态值是否具有 body 属性？
我检查了网络选项卡。正在发出请求，但返回的内容未定义
我真的不知道为什么它返回 undefined

标签： javascript reactjs django axios

【解决方案1】：

这个问题的解决方法很简单，我不可能犯这样的错误。如果有人遇到类似问题并且前端似乎工作正常，这是我采用的方法。我在后端应用程序中检查了serializers.py，发现即使我在博客文章models.py 中有slug，我也没有将slug 添加到该字段中。向 `serializers.py1 中的字段添加 slug 解决了这个问题

【讨论】：

【解决方案2】：

检查网络选项卡以查看获取的响应类型，或者是否发出请求，然后进行必要的更改。

【讨论】：

我检查了网络选项卡。正在发出请求，但返回的内容未定义