单击指向同一页面的链接时更改个人资料图片

Question

I have an user profile (/someuser) that I open using:

<Route path="/:user" component={Profile} />

The profile is like this:

export default function App(props) {

const [nick, setNick] = useState(props.match.params.user); //get the nick using props.
const [profile, setProfile_picture] = useState(profile_picture); // default one

useEffect(() => {

// get current user profile picture:
firebase.database().ref('/users/').orderByChild('user').equalTo(props.match.params.user).once('value').then(snapshot => {
        if (snapshot.exists()){
            var img = snapshot.val().img;
            setProfile_picture(img);
        }
});
}, []);

return(
    <>
<img className={classes.profile} src={profile} />
<h1>{nick}</h1>
<Link to="/user2">Go to profile 2</Link>
</>
);
}
);

Supose I'm in /user profile and I click in the Link at the end of the code to go to the /user2. What I'd like to do is change the profile picture and the nick (without reload). Force after click to update this informations... Any ideas how can I do this?

Thanks.

Answer 1

You need to trigger the useEffect based on params change because when the params change component is re-rendered by react-router and hence the state will not be re-initialized.

Triggering the useEffect on params change will ensure data is updated when params change.

Also make sure to set nick state too ni useEffect as that too needs to update on params change

useEffect(() => {

    // set nick state
    setNick(props.match.params.user);
    // get current user profile picture:
    firebase.database().ref('/users/').orderByChild('user').equalTo(props.match.params.user).once('value').then(snapshot => {
            if (snapshot.exists()){
                var img = snapshot.val().img;
                setProfile_picture(img);
            }
    });
}, [props.match.params.user]);

Answer 2

Do you mean without reloading the page? If so then I think you can make a boolean that toggles when you go to a different route and initiates then useEffect hook by putting it in the dependency array. Or you could move the code to a separate component and pass it in as a prop. Now to do it completely without redirecting the browser would be to use the toggle boolean as mentioned before, but using fetch api, axios, etc to send that nick to a backend and change it accordingly which I think is similar to an Ajax request I hope this helps.