问题标签 [react-component-unmount]

这是状态值，如果可能的话，我需要卸载值Componentwillunmount请告诉我

我收到了这个错误

我一直在用 React 开发一个事件注册网站。一切都很好，直到我遇到这个：

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

我正在使用 Firebase 来存储内容。而且我不知道是因为上面的警告还是其他原因，但是每次有渲染时，数据库中都会有大量从我的集合中读取。我认为每次刷新时，集合都会再次被完全阅读。应该发生的情况是，如果它最初进行 n 次读取，对于更改它应该进行 1 次读取，但它正在进行 n+1 次读取（所有元数据也被更新并再次读取），一旦导致最大限制读取（50K）我 。有解决办法吗？

我的主页组件：

这是父组件。

上面是名为 OrderSuccess 的 react 组件的代码，我面临的问题是该组件在几秒钟内被卸载，即它出现了几秒钟并在一瞬间消失。我已经多次重新访问代码，但仍然无法找到错误。甚至正在显示路线，但组件不存在。我附在输出页面的片段下方。有人可以为我提供解决方案吗？所有答案将不胜感激。 这是输出页面的片段

我遇到了一个大型 React 应用程序出现经典错误的问题：

我知道主要原因是在仍然发生查询时卸载组件，并且解决方案是使用 AbortController。

我们使用的是graphQL Apollo，但不是useQuery钩子。所以我们有一个类似的方法：

然后在子组件中，有一个如下所示的componentWillUnmount生命周期方法：

如果组件卸载，我如何实现取消查询的方法？当我加载视频播放器然后取消时，会发生上述错误。

我想知道对于我遇到的问题是否有另一种适当的解决方案。当 React 将组件重新挂载到不同的父节点时，我希望组件的状态保持活动状态。我正在使用一组组件，这些组件被拆分为不同的父节点进行渲染。

假设我从 API 获得了一些数据，现在我遍历数据并创建一堆组件以推送到这样的数组中

Task 是一个类组件，在其构造函数中我将状态设置为

现在我的父组件看起来有点像这样：

（如果您想知道我在重新排列函数中过滤了什么，我在此示例中省略了 refs 的设置，但它有效）

现在，“任务”是用户可以与之交互的组件。用户将 state.value = 3 设置为 state.type 0（被动）组件，然后点击一个按钮，将该组件的 state.type 设置为 1，使其成为活动任务并调用重新排列（）函数示例组件。React 删除 Child1 中的 Component 并将其移动到 Child2 ，这使它再次挂载并将道具作为其状态的值。所以它再次是类型 0 和值 0（但这次在 Child2 中呈现）。但我希望它保持它在 Child1 父级中的状态。

我的解决方案类似于一个状态数组，它将任务组件的当前状态存储在“示例”父节点中。在任务的每次挂载上，它都会在这个状态数组中搜索它的状态值，如果不存在则获取道具。另一种解决方案可能是存储 API 数据数组并仅在该数组中设置值并在每次更改时循环遍历它以获取正确的道具。但这对我来说听起来并不高效。

我的问题是，是否还有其他更优雅的解决方案，或者我处理这种情况的方式是否完全错误。这些示例是非生产性代码，如果有拼写错误，我很抱歉，我是 React 新手，没有找到任何好的提示来解决这个问题。提前致谢。

编辑：这里的简单示例： https ://codesandbox.io/s/bold-proskuriakova-istmq7 ?file=/src/Tasks.js 红方块在点击时正确跳转到底部 div，但将使用 orig 安装。道具类型。

Expo 文档指出Audio.Sound组件应该通过useEffect返回清理功能的 -hook 卸载。

我这样做但仍然收到警告

每次组件卸载时。

我不确定执行此操作的最佳方法是什么，但是 - 我已经输出了 div 列表。当我单击其中一个时，它会得到一个 class active。单击 div 后，我需要在此特定类中显示我制作（渲染）的组件。我正在使用带有 react 的 next.js 并且一直在使用 CSS 模块。

目前我尝试过：ReactDOM.render( <InnerDisc/>, document.getElementsByClassName(styles.active) ); 但出现错误Error: Target container is not a DOM element.

子（InnerDisc）组件

导出默认 InnerDisc；

主要应用组件