如何在链接在 react-router-dom 工作之前更改状态

Question

我必须在链接工作之前获取有关用户的信息，但我不知道该怎么做。 这不是我所有的代码，而是类似的。单击时，我必须获取信息，然后将其提供给我链接到的组件，但链接首先起作用并且信息没有时间获取。

  const [userId, setUserId] = useState(null);

  const filterUserbyId = (id) => {
    setUserId(id);
  }

    return(
      <Link 
      onClick={()=>filterUserbyId(props.id)}
      to={{
        pathname: `/user/${props.id}`,
        state: {
          userId: userId
        }
      }}>
   )

这也是警告，但它确实说明了我上面所说的

警告：无法对未安装的组件执行 React 状态更新。 这是一个空操作，但它表明您的应用程序中存在内存泄漏。 要修复，请取消 useEffect 中的所有订阅和异步任务 清理功能。

Answer 1

你把这么简单的任务搞得太复杂了。

与其尝试从数据库中获取数据，然后将获取的数据传递给您将重定向到的新组件，不如将用户 ID 作为 URL 参数传递

return(
  <Link to={`/user/${props.id}`} />
);

在另一个组件中，使用 useParams() 钩子从 URL 参数中提取用户 ID

const { userID } = useParams();

注意： userID 是动态路由参数。要使上述语句起作用，到该组件的路由应定义为：

<Route path="/user/:userID" component={/* insert component name */}/> 

获得用户 ID 后，使用 useEffect() 挂钩从数据库中获取数据并将其显示给用户。

useEffect(() => {
   // fetch the data here
}, []);

替代解决方案 -（不推荐）

您也可以按照最初尝试的方式执行此操作，但要使其正常工作，您需要将 Link 组件更改为普通的 button 元素，并在单击该按钮时从数据库中获取数据，然后以编程方式使用useHistory() 钩子更改路由，将获取的数据传递到新路由。

const routerHistory = useHistory();

const filterUserbyId = (id) => {
  // fetch user data
  ...
  // redirect to another route
  routerHistory.push(`/user/${props.id}`, { state: data });
}

return(
   <button onClick={() => filterUserbyId(props.id)}>
     Button
   </button>
)

我建议您不要使用此解决方案，因为您不想在更改路线之前等待从数据库中获取数据。一旦用户点击并在新组件中获取数据，就应该更改路由。