I am using React Navigation to navigate between pages. I have a Profile page that contains user info card and that user's posts. I use Post component inside this Profile component as shown below.
And I have a link button to navigate users profile inside the Post component.
<Button className="fs30"
type="text"
onClick={() => {navigate("/Profile",{state:{profileID:post.userId}});}}
>
{post.userName}
</Button>
I also use this Post component inside Home Page and navigation is works there without any problem.
My question is the following: When I'm on Profile page and click the navigate button nothing happens. I want to refresh the Profile page with different parameters when the button clicked.(ex: different users profile). How can I do that?
Note: I am fetching the data in Profile page from WEB API using profilId state and useEffect hook:
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);
});
}, []);
Since profileID is changing, your current code would work. All you have to do is to add it as dependency, like so:
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]);