如何在reactjs中使用带有钩子的功能组件获取数据
如何在reactjs中使用带有钩子的功能组件获取数据
提问于 2022-07-04 07:04:57
我正在使用nextjs，并且我试图使用带有“钩子”的"functional“来使用"axios”来获取数据，但是我得到了以下错误："AxiosError: Request failed with status code 404"，这是我的代码。
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
const Post = () => {
let params = useParams();
const [post, setPost] = useState(null)
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(post => {
setPost(post)
});
}, [])
return (
<div>
{post !== null ? (
<div>
<h4>{res.data.title}</h4>
<p>{res.data.body}</p>
</div>
) : (
<div>Loading post...</div>
)}
</div>
)
}
export default Post回答 1
Stack Overflow用户
发布于 2022-07-04 07:30:56
发出请求的部分看起来不错，但似乎错误的部分是呈现试图显示res.data.title和res.data.body的部分，但问题是来自/posts端点的响应中不存在title和body --这个端点将返回随机帖子数组，这意味着res.data是一个数组，您可以使用它来遍历和显示帖子。
此外，我建议您将.then部件重写为：
.then(response=> {
setPosts(response.data)
})正如您所看到的，我将输入参数命名为response，而不是post(正如您所做的那样)，因为这个输入参数表示axios响应，它是从端点检索的数据的包装器。您应该将response.data存储在内部状态中，不需要持有特定于axios的信息。另外，您应该将[post, setPost]重写为[posts, setPosts]，改为复数，因为这个端点返回的是帖子列表，而不仅仅是一个帖子。
更新
重写如下内容：
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
const Post = () => {
let params = useParams();
const [posts, setPosts] = useState(null)
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
setPosts(response.data)
});
}, [])
return (
<div>
{posts !== null ?
posts.map(post => (
<div key={post.id}>
<h4>{post.title}</h4>
<p>{post.body}</p>
</div>
))
: (
<div>Loading posts...</div>
)}
</div>
)
}
export default Post页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72852884
复制相关文章
相似问题
腾讯云开发者
