无法使用axios检索react中的单个博客

Question

我花了一些时间试图弄清楚为什么我不能使用axios获得个人博客文章的详细信息页面。代码没有返回任何数据(它返回undefined)我有以下代码:

/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>
);
};

BlogPost组件

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)，但我找不到错误在哪里，因为其他组件正在返回数据，除了特定的一个。代码返回的数据为那些我练习，但从来没有在我的情况下工作，但一切似乎都与他们相似。

Answer 1

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

Answer 2

这个问题的答案碰巧很简单，我不可能犯这样的错误。如果有人遇到类似的问题，前端似乎工作良好，这是我采取的方法。我检查了后端应用程序中的serializers.py，看到我没有将slug添加到字段中，即使我在博客文章models.py中有蛞蝓。向序列化器中的字段添加段塞。Py1修复了问题