路由更改时如何清除useState的数据

Posted 2023-02-21

【中文标题】路由更改时如何清除useState的数据

【英文标题】：how to clear data of useState when route get changed

【发布时间】：2022-01-21 23:00:15

【问题描述】：

我通过在 react 中使用 useState 钩子来维护状态。我想清除在路由更改时保持状态的值。

例如 - 我在基于反应的项目中声明了 4 条路线。如下

<Router>
    <Layout>
      <Route exact path="/" component=Home></Route>
      <Route exact path="/defineFacilities" component=DefineFacilities></Route>
      **<Route exact path="/createNewModel/:id" component=ModelFormsContainer></Route>**
      <Route exact path="/viewExistingModels" component=ViewExistingModels></Route>
      <Route exact path="/importNewModel" component=ImportNewModel></Route>
    </Layout> 

我在 ModelFormsContainer 组件中维护了状态。当用户移动到其他路线时，我想清理状态值。目前，当我移动到其他路线并返回 ModelFormsContainer 组件时，我注意到我的状态仍然可用。

【问题讨论】：

在您决定移动到另一个页面后立即将其设置为空字符串或 null

使用 useEffect hook 中的清理功能。它在组件卸载时调用。在此函数中，您可以将状态设置为 null。顺便说一句，卸载组件时反应会破坏状态。

@MhkAsif 是的，当第一次为新表单设置状态时 useEffect 正在工作，但是当同一组件处于编辑模式时（意味着根据将数据保存到数据库中填充状态）以及尝试更改时会失败路由并返回组件然后我的状态没有变干净。 const [formState, setFormState] = useState(defaultValueFormState); useEffect(()=> console.log('useEffect') return ()=> setFormState(defaultValueFormState); ,[])

本地组件状态被转储并且ModelFormsContainer在改变路由时被卸载。这里似乎还有其他事情发生。您可以将所有相关代码添加到您的问题中吗？你能分享ModelFormsContainer 组件以及它在安装时的作用，以及当路由发生变化时。编辑模式在做什么？

我同意@DrewReese ，组件未卸载似乎很奇怪。也许尝试使用children 而不是component 道具：<Route exact path="/createNewModel/:id"><ModelFormsContainer /></Route>。该道具上的文档对我来说有点不清楚。 v5.reactrouter.com/web/api/Route/component

【参考方案1】：

我无法reproduce the issue you describe，但如果您需要在路线更改时执行某些操作，您可以通过history 对象监听路线/位置的更改。

history.listen

开始监听位置变化并调用给定的回调 更新时更新。

// To start listening for location changes...
let unlisten = history.listen(( action, location ) => 
  // The current location changed.
);

// Later, when you are done listening for changes...
unlisten();

在ModelFormsContainer 访问传递的history prop 在组件挂载时实例化一个监听器，传递给它一个更新状态的回调。

例子：

useEffect(() => 
  const unlisten = history.listen(() => 
    console.log("route changed!!");
    // apply business logic to set any component state
  );
  console.log("ModelFormsContainer mounted");

  return unlisten;
, []);

如果ModelFormsContainer 是一个类组件，那么显然使用componentDidMount 和componentWillUnmount 并将unlisten 保存为类实例变量，即this.unlisten。