Estoy trabajando con nextjs y estoy tratando de usar un "componente funcional" con "ganchos" para obtener datos usando "axios", pero recibo el siguiente error "AxiosError: Request failed with status code 404" Aquí está mi código
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 PostLa parte en la que realiza la solicitud se ve bien, pero una que parece incorrecta es la parte en la que intenta mostrar res.data.title y res.data.body , pero el problema es que el title y body no existen en la respuesta de /posts punto final de /posts : este punto final le devolverá una matriz de publicaciones aleatorias, lo que significa que res.data es una matriz que puede usar para recorrer y mostrar publicaciones.
También te sugiero que reescribas .then part a:
.then(response=> { setPosts(response.data) }) Como puede ver, nombré el parámetro de entrada como response , y no lo post (como lo hizo), porque este parámetro de entrada representa la respuesta de axios, que envuelve los datos recuperados del punto final. Simplemente debe almacenar response.data dentro del estado interno, sin necesidad de mantener axios específicos. También debe reescribir [post, setPost] a [posts, setPosts] , al plural, porque este punto final devuelve una lista de publicaciones, y no solo una sola publicación.
ACTUALIZADO
Reescribir a algo como esto:
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