当url更改时，我如何启动反应操作

Question

所以我正在建立一个网站，用户可以查看彼此的个人资料。我有一个配置文件组件，我想显示基于用户id的配置文件。我将这些用户id作为url参数发送。

我的问题是，如果我从另一个用户配置文件切换到我的配置文件，我的getProfileById不会启动(我有一个"我的配置"按钮，它直接将经过身份验证的用户的id发送到url paramater(。当url更改时，我想启动我的操作。我该怎么做？

这是我的getProfileById操作代码：

export const getAllProfileById = (userId) => async dispatch => {
dispatch({ type: "CLEAR_PROFILE" });
try {
const res = await axios.get(`/api/profile/${userId}`);
dispatch({
type: "GET_PROFILE",
payload: res.data.data
})
} catch (error) {
dispatch({
type: "PROFILE_ERROR",
payload: { msg: error.response.statusText, status: error.response.status }
})
}
}

以下是我如何在配置文件组件中调用getProfileById

useEffect(() => {
if (!profile) {
dispatch(getAllProfileById(id));
}
}, [dispatch])

Answer 1

基于注释部分-您正在使用react-router-dom-您可以使用useParams挂钩来捕获useEffect组合的更改，请参阅文档：

useParams返回URL参数的键/值对的对象。使用它访问当前<Route>的match.params。

查看一个可能的简化工作思路：

const Profile = () => {
const { id } = useParams() // destructure the id param from the URL
useEffect(() => {
// here you can see a logging step once id is changing
// based on the given dependency array
console.log(id)
// also you can dispatch your action as
dispatch(getAllProfileById(id))
}, [id])
return <> your component's code </>
}

当然，如果您在URL中有不同的参数名称，只需将其从id更改为正确的名称即可。