问题标签 [react-component-unmount]

通常，当函数退出时，变量会“消失”，但状态变量会被 React 保留

1-这是否意味着组件卸载时会保留状态？

2-如果是，这是否意味着当这个组件准备好再次挂载时，它的状态会得到它的旧值而不是被初始化？

我有一个登录组件，安装时主体必须如下所示。

我正在使用 useEffect 挂钩设置类名，如下所示：

用户成功登录后，他们将被重定向到仪表板组件。在安装仪表板组件之前，必须删除上面设置的 body 类。上面的 useEffect 就是这样做的，但是用户必须先刷新页面才能看到仪表板组件的正确布局。

用户登录后如何最好地删除正文类，以免影响仪表板组件的布局？

如果我从中返回一个函数，useEffect我可以确定该函数将在组件卸载时运行。但是 React 似乎在调用我的卸载函数之前擦除了本地状态。

考虑一下：

任何人都可以确认预期的行为是应该擦除组件状态吗？而且，如果这是正确的行为，如何在组件卸载之前将当前组件状态触发到服务器？

为了提供一些上下文，我正在对服务器的发布请求进行去抖动，以避免每次用户更改设置时触发它。去抖动效果很好，但是一旦用户离开页面，我需要一种方法来触发请求，因为排队的去抖动方法将不再从未安装的组件中触发。

我正在尝试通过构建 Web 应用程序来学习 React。由于我想一步一步地学习，所以目前我不使用 Redux，我只使用 React 状态，我有一个问题。

这是我的组件架构：

如您所见，我有一个名为 的主文件App.js，在左侧我们有Main.js一个应用程序的中心部分，其中包含Game.js我的游戏实际发生的位置。在右侧，我们有Side.js一个侧边栏，我想在其中显示每个玩家在游戏中所做的动作。它们将显示在Moves.js.

为了更清楚地思考国际象棋游戏。在左边你实际玩游戏，在右边你的动作将被列出。

现在我将向您展示我的代码并解释问题所在。

正如您在我的代码中看到的那样，我已经在App.js. 在左侧，我传递了根据玩家的动作更新状态的函数。在右侧，我传递状态以更新视图。

Game.js我的问题是，组件内的每个单击事件都会Moves.js卸载并且console.log正在被触发，我没想到它会表现得像那样。我期待它只会在我将视图更改为另一个视图时卸载。

知道为什么会这样吗？如果我写的东西没有意义，请随时问我。

在我的 react-node.js 项目中的屏幕之间渲染时出现错误，我无法将其关闭

这是我的主屏幕

这是第二屏

我不知道我做错了什么我不断收到错误：我在其他地方看到了一些建议，但没有一个对我有帮助......如果有人可以查看我的代码并看看我在做什么，我将非常感激错误的

编辑 我解决了问题，问题出在 window.addEventListener("scroll", checkScrollTop); 我需要像这样删除：

有没有办法在 React 组件卸载后查看仍在内存中的不必要对象或待处理的网络请求？如果我能看到，那么我可以在 componentWillUnmount() 中处理它。

我是使用 React-Native 的新手，我正在为流媒体应用程序创建音乐播放器，几乎一切正常，它在后台播放，但是当我想切换到另一张专辑或播放列表时，它不会剪切正在播放的歌曲要播放新的，它会同时播放上一首歌曲和新一首歌曲。

它向我显示了这个警告：

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

但是我不知道如何取消所有订阅和异步任务。

这是我的代码。

我有一个使用 Redux 的 React 应用程序。问题是在我在许多组件之间切换并转到主屏幕（这是一个简单的组件）之后，Chrome 分析器显示所有来自未安装组件的节点都变成了Detached*，例如Detached InternalNode，Detached EventListener等等。我尝试在一个全新的 React 中重新创建问题应用程序，但它的行为不同。它不会将未安装的组件保存在内存中。

重新创建的示例：

内存分析器显示切换组件后未使用的节点被删除

但在真正的应用程序中，它们看起来像这样

持有分离节点的陷阱是什么？我知道该示例无法重复它具有的所有功能（useEffect 等），但是逐个组件分析它可能需要很多时间。

我的应用程序中有 2 个组件/页面：orderPage 和 customerPage，这是主要组件中的导航：

订单页面有按钮/链接可打开 CustomerPage 以详细查看客户数据（客户是订单的属性）。CustomerPage 上有用于关闭 CustomerPage 并导航回 OrderPage 的按钮/链接：

问题是，这样的导航会卸载并破坏订单组件。我可以通过输出 formCreateTimestamp 通过 OrderPage 中的构造函数代码检查此行为：

我可以控制这种行为并防止这种卸载和销毁吗？我在哪里可以进行这种控制？也许在负责导航的代码/标记中？如何？或者我可以在 OrderPage 中实现更复杂的逻辑来防止卸载？

确实，有ComponentWillUnmountlifecylce API https://reactjs.org/docs/react-component.html#componentwillunmount但文档没有提到此 API 的实现可用于防止卸载（例如通过在函数内抛出一些异常） .

订单有客户，从订单导航以查看客户详细信息然后导航回来是很常见的用例，当然，在这种情况下，不应从 DOM 树中修改/删除 OrderPage，但仍然会发生这种情况。可以建议使用模态对话框来呈现客户数据，但模态对话框对于针对移动使用的 Web 应用程序来说是一个不好的建议。

如何防止 React 组件中的卸载？为解决方案提供了 unregiterLeaveHooks 和其他解决方案，但它们更多的是关于防止导航（例如从 OrderPage 到 CustomerPage），而不是关于在导航到 CustomerPage 时保持 OrderPage 处于未安装状态。该问题还提到防止卸载应该在flux/store中而不是在中进行componentWillUnmount，但是该问题没有进一步详细说明。实际上，我确实在使用通量/状态，我很乐意在业务级别（Redux 商店）而不是在某些特定的组件功能中实现卸载控制逻辑。

防止使用 React-router 卸载组件已经详细说明了我的情况，它的答案说这种 React-Router 行为（自动创建和卸载组件）是设计使然，唯一的解决方案是使用始终存在的组件（放置外部 Switch 语句）由相关 CSS 设置为可见/不可见。所以，可能我的问题是重复的。

我正在尝试在表单中使用 useState，但出现以下错误：

这是组件的代码：

react 应用程序有不同的页面（直到现在索引和sing-up），也许它是相关信息，但我不知道如何修复它。

如果有人知道如何解决它，我将非常感谢您的回答。