Estoy usando React Navigation para navegar entre páginas. Tengo una página de Profile que contiene la tarjeta de información del usuario y las publicaciones de ese usuario. Uso el componente Post dentro de este componente Profile como se muestra a continuación.
Y tengo un botón de enlace para navegar por el perfil de los usuarios dentro del componente Post .
<Button className="fs30" type="text" onClick={() => {navigate("/Profile",{state:{profileID:post.userId}});}} > {post.userName} </Button> También uso este componente Post dentro de la página de inicio y la navegación funciona allí sin ningún problema.
Mi pregunta es la siguiente: cuando estoy en la página de Profile y hago clic en el botón de navegación, no sucede nada. Quiero actualizar la página Profile con diferentes parámetros cuando se hace clic en el botón (por ejemplo, perfil de diferentes usuarios). ¿Cómo puedo hacer eso?
Nota: estoy obteniendo los datos en la página de Profile de la WEB API usando el estado profilId y useEffect :
useEffect(() => { const response = axios.get("http://localhost:5122/GetSpesificUsersPosts", { params: { userId: profileId }, }); response.then((res) => { setPostList(res.data); }); }, []); useEffect(() => { const response = axios.get("http://localhost:5122/GetUserInfo", { params: { userId: profileId }, }); response.then((res) => { setUserInfo(res.data); }); }, []);Dado que el ID de profileID está cambiando, su código actual funcionaría. Todo lo que tienes que hacer es agregarlo como dependencia, así:
useEffect(() => { const response = axios.get("http://localhost:5122/GetSpesificUsersPosts", { params: { userId: profileId }, }); response.then((res) => { setPostList(res.data); }); }, [profileId]); useEffect(() => { const response = axios.get("http://localhost:5122/GetUserInfo", { params: { userId: profileId }, }); response.then((res) => { setUserInfo(res.data); }); }, [profileId]);