Estoy tratando de obtener la identificación de la URL, por lo que puedo obtener una publicación específica de la API para devolverla. No puedo usar Class Component para hacerlo, porque useParams solo funciona con funciones. Intento poner los datos dentro de la publicación variable, pero tampoco funcionó.
import { useParams } from "react-router-dom"; import axios from "axios"; const Post = () => { let params = useParams(); let post = null; axios.get('https://jsonplaceholder.typicode.com/posts/' + params.post_id) .then(res => { post = res.data ? ( <div> <h4>{res.data.title}</h4> <p>{res.data.body}</p> </div> ) : ( <div>Loading post...</div> ); }); return ( <div>{post}</div> ) } export default PostLos datos dinámicos, como una solicitud con axios , deben realizarse dentro de un useEffect . Con la matriz de dependencias vacía [] , proporciona que la solicitud en el useEffect solo ocurrirá en el primer procesamiento, pero no en el siguiente.
Cuando llegue la respuesta, guarde el resultado en un estado. Representar los datos adecuados en función del valor del estado.
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/' + params.post_id) .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 PostDebe usar los ganchos useEffect y useState de esta manera
import { useEffect, useState } from "react"; import axios from "axios"; import { useParams } from "react-router-dom"; import "./App.css"; function App() { let params = useParams(); const [postState, setPostState] = useState({ data: {}, loading: false }); useEffect(() => { axios.get("https://jsonplaceholder.typicode.com/posts/"+ params.post_id).then((res) => { if (res.data) { setPostState((s) => ({ ...s, data: res.data })); } else { setPostState((s) => ({ ...s, loading: true })); } }); }, []); const { data, loading } = postState; return ( <> {data && !loading ? ( <div> <h4>{data.title}</h4> <p>{data.body}</p> </div> ) : ( <div>Loading post...</div> )} </> ); } export default App;