问题标签 [react-component-unmount]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
37 浏览

javascript - React 功能组件在设置状态后卸载/挂载父组件

我有一个简单的功能组件,它通过一个在闭眼和睁眼图像之间切换的小按钮将密码字段切换为可见和不可见。

父级中没有任何状态受到影响,但是,父级在图像更改后的一瞬间卸载并重新安装,这每次都会将子级的 isVisible 状态重置为 false。下面是代码:

谁能看到我遗漏的明显东西?我认为父母不应该因为孩子状态的变化而重新安装/重新渲染。

0 投票
1 回答
256 浏览

reactjs - 在反应中调用 fetch API 时出现内存泄漏错误

我有以下用反应编写的代码,我得到内存泄漏错误。我尝试了一些技巧,例如调用 abort 并将状态设置为 null,但到目前为止对我没有任何作用。

我得到的错误:

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

我的代码片段:

0 投票
1 回答
40 浏览

javascript - 从导航栏中单击单独的链接时,ReactJS 不会重新加载我更新的组件

我有这种情况,在导航栏中我有不同的类别,例如科学、商业等。当单击其中任何一个时,我们应该使用适当的类别呈现新闻组件。

但在我点击任何链接的情况下,虽然地址栏确实发生了变化,但新闻组件并没有被我提供的新类别重新加载。

这是我的文件:

应用程序.js

导航栏.js

新闻.js

0 投票
0 回答
52 浏览

javascript - 不确定如何修复未安装组件问题上的 React 状态更新

我正在构建一个拼图应用程序,完成后将播放视频。

当我完成拼图时,一切都发生了变化并且工作正常,但我在控制台中收到以下错误,我不确定我需要做什么来修复它。

无法对未安装的组件执行 React 状态更新。这是一个空操作,但它表明您的应用程序中存在内存泄漏。修复,取消 componentWillUnmount 方法中的所有订阅和异步任务

抱歉,如果这是一个简单的问题,我是自学的,所以我知道我的知识有一些空白。有谁知道我该如何解决这个错误?

我真的很感激任何人都可以提供的任何帮助。

0 投票
1 回答
77 浏览

reactjs - 反应表单提交和“无法在未安装的组件上执行状态更新”?

基本上,我有一个登录页面,当你填写表格并提交数据时,它会通过这个

它有效,但我收到警告

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

所以我用谷歌搜索了这个问题,然后尝试添加 axios 取消令牌,更准确地说是我设置

然后将以下内容添加到我的 axios 请求中

最后

但我仍然收到警告。我已经失去了几个小时试图摆脱这个,我正在失去宝贵的时间,而且似乎没有任何效果。

此外,无论出于何种原因,如果我删除了addUser函数,我就会失去警告,但这没有任何意义,因为这只是一个 Redux 调度,而且据我所知,它们应该是同步的并且无事可做与组件的本地状态。

可能是什么问题?

0 投票
1 回答
70 浏览

javascript - 无法在未安装的组件上执行 React 状态更新 #434

我正在尝试向实时数据库 Firebase 添加步骤。当我添加步骤时,它在数据库中工作,但随后模态关闭,我没有任何错误,但模态无故关闭

我认为问题是当我调用 firebase 来更新它时(在 addTodo 函数中),但我不知道为什么。

TodoModal.js:

TodoTask.js:

0 投票
1 回答
107 浏览

reactjs - 如何修复以下警告:“无法在未安装的组件上执行 React 状态更新”

编辑:我一直在尝试在我的代码中实现与此类似的修复,但我对如何在我的代码中转换此方法感到非常困惑。我一直在尝试将该修复程序应用于我的updateDose函数,但它不起作用。

我正在使用 React、Material UI、React Hook Form 和 Yup 创建一个应用程序。

我有两个对话框,一个用于“编辑剂量”按钮,一个用于每张卡的“删除药物”按钮。在“编辑剂量”对话框中,用户将新剂量输入到表格中。

如果我尝试多次更新药物剂量,我会收到以下警告(第一次更新显示没有错误,然后第二次显示此错误)...

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

我已经搜索了其他教程以尝试根据其他示例找到修复程序,但我没有任何运气。非常感谢您,这是我的相关代码...

0 投票
1 回答
45 浏览

reactjs - 尝试修复:无法对未安装的组件执行 React 状态更新

我有以下代码:

当我登录页面并按 F12(给我检查选项卡)时,有时一切都很好,我没有收到任何警告,但大多数时候我收到以下警告:

并且每当出现此警告并且我按下按钮时,应用程序就会中断并且出现错误:allSlides.map is not a function

我尝试在钩子return () => {}末尾添加,我还尝试更改为以下内容:useEffectuseEffect

但是在我尝试解决错误的两种情况下,它都没有解决它。

请注意,无论出于何种原因(在所有 3 种情况下),有时 Web 应用程序都不会中断并且一切正常,但大多数情况下,如果我按下按钮,我会收到警告,然后是错误。

0 投票
0 回答
19 浏览

javascript - 如何在 React Canvas 中正确卸载组件?它的工作,但给了我很多错误

代码按我想要的方式工作。球出现,然后在球消失后出现种子。然而,如果你检查控制台,当球消失时,会有大约 1000 个错误。

我试图通过两种方式解决它。两者都失败了

并在 return 中返回 ifAttempt 函数

或者

无论哪种方式,当球或种子的状态为假时,它都会返回 null。而且我什么也没看到,但是当它切换到种子时会引发此错误。 基本上说它不能绘制一个未定义的 我理解,但它不应该检查任何 bc 它的未安装/空值?我很困惑任何帮助或方向将不胜感激

0 投票
0 回答
29 浏览

reactjs - 移除容器或其内容后,Portal 子项会发生什么情况?

我计划将React Portals用于我正在构建的解决方案,并且我试图了解当容器或其内容被删除时孩子会发生什么。

我的代码:

其中 container 是一个 HTML 元素。

那么在以下情况下,孩子会发生什么?

案例 1:容器从 DOM 中移除:

案例2:容器内容被卸载