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。我想做的是在不重新加载的情况下更改个人资料图片和尼克。单击后强制更新此信息。。。你知道我该怎么做吗

谢谢。

您需要基于参数更改触发useEffect，因为当react router重新呈现参数更改组件时，状态将不会重新初始化

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

还要确保设置nick state too ni useffect，因为它也需要在参数更改时更新

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

您需要基于参数更改触发useEffect，因为当react router重新呈现参数更改组件时，状态将不会重新初始化

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

还要确保设置nick state too ni useffect，因为它也需要在参数更改时更新

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

---

你的意思是不重新加载页面？如果是这样的话，那么我认为您可以创建一个布尔值，当您转到不同的路由并启动时进行切换，然后通过将其放入依赖项数组来使用effect钩子。或者，您可以将代码移动到单独的组件，并将其作为道具传入。现在，完全不重定向浏览器的做法是使用前面提到的切换布尔值，但使用fetch api、axios等将尼克发送到后端并相应地更改它，我认为这类似于Ajax请求，我希望这会有所帮助。

您的意思是不重新加载页面？如果是这样的话，那么我认为您可以创建一个布尔值，当您转到不同的路由并启动时进行切换，然后通过将其放入依赖项数组来使用effect钩子。或者，您可以将代码移动到单独的组件，并将其作为道具传入。现在完全不用重定向浏览器就可以使用前面提到的切换布尔值，但是使用fetch api、axios等将nick发送到后端并相应地更改它，我认为这类似于Ajax请求，我希望这会有所帮助。

哦，我就快到了！非常感谢你的回答，朋友！很高兴能帮助瑞奇哦，我就在附近！非常感谢你的回答，朋友！很高兴帮助了瑞克