Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

[Duda] Post

Referente al curso React Router: Navegación en una SPA, en el capítulo Exhibiendo post y categoría y actividad Mostrando un post

por Vanessa Marlene Morfin Sanchez
| 79k xp | 27 posts

No sé que hice mal, me da error en la línea 18, me aparecen el siguiente mensaje "React Hook useEffect has a missing dependency: 'navigate'. Either include it or remove the dependency array. Así está el código:

import { useState, useEffect } from "react" import "../assets/css/componentes/card.css" import { useParams, useNavigate } from "react-router-dom" import { buscar } from "../api/api"

const Post = ({ url }) => {

const [post, setPost] = useState({})

const {id}  = useParams()

const navigate = useNavigate()

useEffect(() => {
    buscar(`/posts/${id}`, setPost).catch(() => {
        navigate("/not-found")
    })
}, [id])


return (
    <main className="container flex flex--center">
        <article className="card post">
            <h2 className="post-card__title">{post.title}</h2>
            <p className="text__card">{post.body}</p>
        </article>
    </main>
)

}

export default Post

1 respuesta
solución!
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Vanessa!

El mensaje de error que te aparece se debe a que estás utilizando la función navigate dentro del useEffect sin incluirla en la lista de dependencias. Para solucionarlo, simplemente agrega navigate a la lista de dependencias del useEffect. Tu código debería quedar así:

useEffect(() => {
    buscar(`/posts/${id}`, setPost).catch(() => {
        navigate("/not-found")
    })
}, [id, navigate])

De esta manera, el useEffect se volverá a ejecutar cada vez que navigate cambie. Espero que esto te ayude a solucionar tu problema. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)