Question

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

我的问题是，如果我从另一个用户个人资料切换到我的个人资料，我的 getProfileById 不会触发（我有一个我的个人资料按钮，可以直接将经过身份验证的用户的 id 发送到 url 参数）。我想在 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 }
        })
    }
}

这是我在 Profile 组件中调用 getProfileById 的方式

 useEffect(() => {

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

Answer 1

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

<块引用>

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

查看一个可能的简化工作理念：

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 更改为正确的名称即可。

url 更改时如何触发反应操作？

1 个答案: