时间戳

首页 > 解决方案 > 单击指向同一页面的链接时更改个人资料图片

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

问题描述

我有一个用户配置文件 (/someuser)，我使用以下方式打开：

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

简介是这样的：

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>
</>
);
}
);

假设我在 /user 配置文件中，然后单击代码末尾的链接以转到 /user2。我想做的是更改个人资料图片和昵称（无需重新加载）。单击后强制更新此信息...任何想法我该怎么做？

谢谢。

标签： javascriptreactjsreact-routerreact-hooks

解决方案

您需要触发useEffect基于参数的更改，因为当参数更改组件由 react-router 重新渲染时，因此不会重新初始化状态。

在参数更改时触发 useEffect 将确保在参数更改时更新数据。

还要确保set nick说明太 ni useEffect 因为它也需要更新参数更改

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]);

推荐阅读