Tengo páginas React (BlogContent y RelatedBlog),
Cuando un usuario ve el contenido del blog, puede ver a continuación más blogs del autor. Cuando el usuario hace clic en el artículo que quiere leer, el slug en Url cambia pero el contenido no cambia hasta que el usuario actualiza la página, por lo que el usuario debe actualizar la página cada vez que quiera ver todos los blogs relacionados del autor.
Creo que la razón por la que la página del blog requiere actualizaciones cada vez es porque useEffect() , pero no sé cuál es el truco para solucionarlo.
Aquí está mi código para paginar BlogContent:
export const BlogContent = () => { const { slug } = useParams(); const [data, setData] = useState({ posts: [] }); useEffect(() => { axiosInstance.get(slug).then((res) => { setData({ posts: res.data }); }); }, [setData]); let AuthorBlog = data.posts.author };y aquí para RelatedBlog
export const RelatedBlog = (props) => { const { AuthorBlog } = props; const [appState, setAppState] = useState([]); useEffect(() => { axiosInstance.get("/").then((res) => { const allBlogs = res.data; setAppState(allBlogs); }); }, [setAppState]); const filterAuthor = appState.filter((item) => item.author === AuthorBlog) ;Gracias
Como he escrito en los comentarios, agregar slug a la matriz de dependencias de su useEffect solucionó el problema.
¿Porqué es eso? La matriz de dependencia en el gancho useEffect se usa para volver a ejecutar el gancho cuando cambia una de estas variables. En su caso, al cambiar la URL, cambia el slug para que el componente cargue nuevos datos.
Incluso eliminaría setData de esta matriz, porque no hace nada, ya que los setters useState nunca cambian.
useEffect(() => { laxiosInstance.get(slug).then((res) => { setData({ posts: res.data }); }); }, [slug]);