Tengo algunos problemas para leer el valor de mi id cuando uso el gancho useParams().
tengo 4 componentes:
App.js, Midlocal.js, Blogposts.js y BlogSingle.js
Tengo el enrutamiento configurado en App.js
<Route path='/posts/:id' element={<PostSingle />} />Luego hice mi llamada Api en MidLocal.jsx
const MidLocal = () => { const [post, setPost] = useState([]); async function fetchPosts() { const response = await fetch("https://khg.com.ng/wp-json/wp/v2/posts") const data = await response.json(); setPost(data); }; useEffect(() => { fetchPosts(); }, []);Sill en el mismo componente MidLocal, estoy usando array.map() y pasando los datos como accesorios al componente
<div className="mid__blog__posts"> {post.map((item) => ( <BlogPosts key={item.id} postId = {item.id} title={item.title.rendered} date={item.date} img={item.img} /> ))} </div>Este es el componente BlogPost. Solo un componente funcional simple donde mis datos podrían organizarse de la manera que me gusta con la función de enlace del enrutador de reacción usando su atributo TO para apuntar a la página / componente de blog único
const BlogPosts = ({postId, date, title, img}) => { return ( <div className='post__container'> <div className='post__texts'> <small className='md__post__date'>{date}</small> <Link to={`/posts/${postId}`}><h3 className='md__post__title'>{title}<span className='post__url__icon'><BsFillArrowRightCircleFill /></span></h3></Link> </div> <img src={img} alt={title} className='post__img'/> </div> ) } export default BlogPostsLuego, en el componente Blog Single,
const BlogSingle = () => { const [content, setContent] = useState([]); const {postId} = useParams(); console.log(postId) async function fetchPostContent() { const response = await fetch(`https://khg.com.ng/wp-json/wp/v2/posts/${postId}`) const data = await response.json(); setContent(data); }; useEffect(() => { fetchPostContent(); }, []);console.log (postId) me da indefinido
y tratar de acceder al valor de postId también me da indefinido
<h1>{postId}</h1>Debe nombrar la identificación en la ruta de la ruta en consecuencia. Lo nombró id y está tratando de acceder a él como postId . Cambie el nombre de la ruta en la ruta para que contenga /posts/:postId o utilícelo como id en su BlogPost: const { id } = useParams();
¡Simplemente desestructurar id y cambiar el nombre como postId , vea el siguiente código para una referencia rápida!
const BlogSingle = () => { const [content, setContent] = useState([]); const {id: postId} = useParams(); console.log(postId) async function fetchPostContent() { const response = await fetch(`https://khg.com.ng/wp-json/wp/v2/posts/${postId}`) const data = await response.json(); setContent(data); }; useEffect(() => { fetchPostContent(); }, []);let { id: postId } = useParams();