问题标签 [react-component-unmount]

我有一个 React Native 组件，它对组件中的Image.getSize每个图像发出请求。然后在Image.getSize请求的回调中，我为我的组件设置了一些状态。一切正常，但问题是用户可能会在一个或多个Image.getSize请求响应之前从使用该组件的屏幕转换，这会导致“无操作内存泄漏”错误弹出，因为我'试图在组件卸载后更改状态。

所以我的问题是：如何Image.getSize在组件卸载后阻止请求尝试修改状态？这是我的组件代码的简化版本。谢谢你。

我有一个父组件和子组件。子组件将根据条件通过父组件呈现。因此，当孩子被渲染时，所有 useEffect 和其他代码都被执行，我能够实现 componentDidMount 类型的方法。我不是直接访问子组件，而是仅使用 Parent 根据父级的道具来渲染它。一旦我的子组件可见，我就会调用一个方法来重置“doesChildExists”道具并重新渲染 ParentComponent，并且由于条件失败，因此不会渲染（卸载）ChildComponent。有一次，ChildComponent 即将卸载，我需要做一些事情，但现有的 useEffect 似乎没有被调用。我该如何处理？请帮忙！！

请让我知道这是否不是正确的方法，我已经以不同的方式处理孩子的渲染。

我是 React 的新手，但是当我学习 componentWillUnmount() 方法时，我发现了一种我无法理解的行为。

考虑这个脚本（这里是小提琴-> https://jsfiddle.net/ockhamsblade/4zf5tq2h/37/）：

正如您可以检查 JSFiddle.net 脚本（使用开发人员的控制台）一样，每当您单击一个项目时，List 组件都会从其状态中删除该值并重新呈现剩余的项目。到现在为止还挺好。问题是，在卸载之前，Item 组件始终具有最后一个 item 的 props，例如，如果这些将被覆盖或其他情况（您可以在开发人员的控制台中查看这一点）。所以，即使我要删除项目#3（或任何一个），componentWillUnmount() 上的“this.props.value”总是 = 6，而我期望 = 3。

我猜想，无论出于何种性能原因，React 都会从 DOM 中删除最后一项并重新渲染其余项。这种行为是预期的吗？如果是这样，您能否参考一些文档和/或告诉我如何在卸载之前保留该项目的原始实例？我试图将 props.value 存储在项目状态上，但也不起作用。

提前致谢。

快速点击时我一直在使用反应弹簧：

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

这是我发现有同样问题的示例沙箱。如果您快速单击“单击此处”，您将看到我面临的相同问题。

https://codesandbox.io/s/greeting-card-with-react-spring-f2vr0?from-embed

沙盒来自这个博客：

https://blog.logrocket.com/animations-with-react-spring/

假设我错过了一些愚蠢的事情，但想知道这是否是 react-spring 的问题，因为它与 useEffect 有关。

我是 React 的初学者，遇到了一些问题。 当与特定渲染关联的 setInterval 被清除时？

我有一个带有表单的子组件，用户可以在其中放置标题、描述和图像。

该组件位于其父组件的一部分上，我不希望如果用户更改部分（通过错误或仅查看）它的表单数据将被存储，因此当他回来时，他不需要再写一遍。

我想过将所有内容直接存储在父级的状态中，但是每次用户按下一个键时，它都会重新渲染整个视图。

而且我考虑在父级中创建一个变量，当呈现表单的子级时，其状态将从该父级的变量中获取它的初始状态，并在组件即将卸载时将信息存储在那里useEffect(()=>{return ()=>{ props.formData = formData } },[])

但它不会改变父变量/状态中的任何内容。我怎样才能让它工作？

}

}

我有一个组件计数器，当我单击第一个按钮时，我在 App.js 类中使用了 2 次，它导致仅增加第一个计数器组件的状态值，反之亦然。我的问题是，为什么这两个组件的行为彼此独立？

我有一个正在构建的应用程序，它在左侧有一个导航栏，其中的图标在单击时会打开一个模式：

我已经成功地进行了设置，以便每当用户单击导航栏中的一个图标时都会加载不同的模式，我现在尝试更新状态以突出显示加载了哪个图标的模式，如下所示：

为了实现这一点，我开始掌握父/子关系和操纵状态。

父元素呈现一个<div>捕获状态的：

然后我有一个填充父级的子函数<div>：

最后，我正在更新componentDidMount，componentWillUnmount以便它更新按钮样式（图标颜色和背景颜色）：

这主要按预期工作，但我正在努力完成一些事情：

1. 这种当前方法适用于一个图标/模态组合，但难以扩展，因为我无法componentDidMount为每个图标/模态组合定义不同的功能
2. 我目前的方法目前没有“取消选择”图标并将其恢复为原始样式componentWillUnmount
3. 我不知道如何包含onClick图标的属性： onClick={this.openModal("dashboard")}。当我尝试将其包含在子元素中时，浏览器无法读取属性'openModal'，因为它是父元素的一部分。

我不确定实现我所追求的最佳方法。

单击时button，quote应该使用卸载，componentwillunmount()但我通过登录到控制台进行了检查，卸载根本没有运行。

我有两个页面和两个组件 LibraryPageFilters.tsx (url: /courses) 和 UserVideoCreatePage.tsx (url: /ugc/courses/${course.id})。在组件 LibraryPageFilters.tsx

我有一个检查，如果 course.id 存在于商店中，那么我们会进行重定向。在组件 UserVideoCreatePage.tsx

当组件卸载时，我正在从商店中删除一门课程。

为什么重定向后会发生卸载？结果，我被重定向回来。因为在卸载时课程没有从商店中删除，并且检查（如果（course.id））显示课程在商店中并且发生了重定向（dispatch（push（/ugc/courses/${course.id}）））

UserVideoCreatePage.tsx

库页面过滤器.tsx