无法对已卸载的组件执行 React 状态更新。这是一个无操作

2023-12-01

这是控制台中的警告,

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

这是我的代码

const [index, setIndex] = useState(0);
  const [refreshing, setRefreshing] = useState(false);
  const refContainer: any = useRef();
  const [selectedIndex, setSelectedIndex] = useState(0);
  const navigation = useNavigation();

  useEffect(() => {
    refContainer.current.scrollToIndex({animated: true, index});
  }, [index]);

  const theNext = (index: number) => {
    if (index < departments.length - 1) {
      setIndex(index + 1);
      setSelectedIndex(index + 1);
    }
  };

  setTimeout(() => {
    theNext(index);
    if (index === departments.length - 1) {
      setIndex(0);
      setSelectedIndex(0);
    }
  }, 4000);

  const onRefresh = () => {
    if (refreshing === false) {
      setRefreshing(true);
      setTimeout(() => {
        setRefreshing(false);
      }, 2000);
    }
  };

我应该做什么来清理?

我尝试做很多事情,但警告并没有消失


setTimeout需要使用在useEffect反而。并添加明确的超时作为回报

  useEffect(() => {
    const timeOut = setTimeout(() => {
      theNext(index);
      if (index === departments.length - 1) {
        setIndex(0);
        setSelectedIndex(0);
      }
    }, 4000);

    return () => {
      if (timeOut) {
        clearTimeout(timeOut);
      }
    };
  }, []);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法对已卸载的组件执行 React 状态更新。这是一个无操作 的相关文章

  • 严格模式与 React 18 的工作方式是否不同?

    考虑下面的片段 有了 React 18 count每次渲染时都会在控制台上打印两次 但在 React 17 中它只打印一次 反应 18 示例 function App const count setCount React useState
  • eslint/prettier 在 html 标签中添加不需要的空间

    我正在尝试向我的项目添加配置 以便代码自动格式化 我对 VS Code 中的用户设置进行了一些更新 还安装了 eslint 和 prettier 现在 每当我尝试保存我的代码时 都会从中得到改变 div div div div div di
  • 样式组件如何影响性能?

    使用样式组件是否比样式表更会降低 Web 应用程序的速度 如果我关心性能并且没有任何依赖于 props 的样式 我是否应该放弃样式组件并使用样式表 当您有很多小组件时 同时使用样式化组件渲染 性能开销可能会很有意义 绝对值得测试以删除小元素
  • Native Base Picker 项目的条件渲染 [React Native]

    我正在为我们的产品使用 Native Base 组件 并且对此很满意 但我陷入了困境 那就是将项目放入 Nativebase Picker 中 我的代码是这样的 渲染方法代码 render return
  • 防止在 MaterializeCSS 下拉菜单中单击时关闭该下拉菜单

    我正在为当前项目使用 Materialize css 并且我的下拉菜单中包含一些输入表单 下拉菜单可以选择关闭 单击外部 dropdown content 单击内部 dropdown content 点击 dropdown button 我
  • 如何在每个测试中更改笑话模拟函数的返回值?

    我的组件测试文件中有一个像这样的模拟模块 jest mock magic index gt navigationEnabled gt true guidanceEnabled gt true 这些函数将在我的组件的渲染函数中调用 以隐藏和显
  • 图像未使用 require 加载本地文件

    我想加载本地图像 但是使用 require 方法它总是给我错误 在这种情况下我如何在 require 中传递 this props image my code Card js 我试过这个 class Card extends Compone
  • React Map 总是使用最后一个元素的数据调用方法

    我正在制作一个社交媒体应用程序 我正在循环浏览所有评论并将其显示在用户界面上 当我单击编辑时 最后一条评论的文本总是显示在输入中 我尝试了很多不同的方法 改变了结构 使用bind来绑定上下文 但没有任何帮助 我正在使用 React Mate
  • React:如何从react-router-dom通过链接传递道具?

    我正在努力通过title从道具到我的Dishes组件使用但找不到解决方案 有什么建议么 import Link from react router dom const Category title gt return title expor
  • React-Native 应用程序在导航时崩溃

    将 React Native App 升级到以下配置后 react 16 9 0 react native 0 61 5 react navigation 4 0 10 react navigation stack 1 10 3 react
  • React JS - 单击时更改颜色并将默认颜色放在所有其他颜色上

    我有 x 个渲染数文章预览依赖于 API 调用的组件 div div Object keys images map index i gt return div div
  • 违反不变性:Picker 已从 React Native 中删除

    错误不变违规 Picker 已从 React Native 中删除 现在可以安装并导入 react native picker picker 而不是 react native 请参阅 https github com react nativ
  • 使用 nginx 在云上部署 django 和 React

    我有一个 digitalocean 服务器 并且已经使用 Gunicorn 和 nginx 部署了 Django 后端服务器 如何在同一台服务器上部署 React 应用程序 您可以构建 React 应用程序并使用 Nginx 提供其静态文件
  • 刷新或直接点击链接时找不到 React.js 页面

    我在此链接上有一个反应项目 https notchy cross 000webhostapp com https notchy cross 000webhostapp com 如果向下滚动 您会看到一个名为 产品类别 的部分 https i
  • React Router v4 的优点

    除了能够在 NavLink 上设置 activeClassName 和 activeStyle 之外 还有什么理由使用NavLink over Link在您的网站上不需要活动状态 类的非导航元素 即不是页眉或页脚中的主导航 上创建指向其他路
  • 从回调中访问状态

    我在从回调访问组件状态时遇到问题 国家的价值num更改正确 但此类更改对于加载时定义的回调函数不可见 import React useState from react class MyObject callback gt void cons
  • 如何在React Native Android中获取响应头?

    您好 我想在获取 POST 请求后获取响应标头 我尝试调试看看里面有什么response with console log response 我可以从以下位置获取响应机构responseData但我不知道如何获取标题 我想同时获得标题和正文
  • React 中的 Reconciliation 详解

    我是 React JS 的新手 谁能准确解释和解是如何运作的 我尝试从 React 官方网站上理解它 但没有得到它 我是这样理解的 您会同意 React 使用组件使事情变得简单且更快 通过 JSX 我们可以让用户定义的组件变得更容易 一天结
  • 如何从 Chrome React Dev Tools 打开 VS code 中的组件文件?

    是否可以右键单击 React Dev 工具下可见的组件 然后单击 在 IDE 中显示 从而在 VSCode 中打开该文件 这将是有益的 因为我不必去寻找该组件 我经常想在 VS Code 中查看某个组件的源代码 但由于组件的模块化复用 代码
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np

随机推荐

  • 对 MS Graph API 的请求给出“授权请求被拒绝 - 没有足够的权限来完成操作”

    我对 授权请求被拒绝 权限不足 无法完成操作 消息有疑问 该消息不断从对 Windows Graph API 的请求中返回 具体来说 我在 Azure 云中工作 我有一个调用 API 的 iOS 移动应用程序 我已在我的门户中打开 Acti
  • Perl Getopt 多次使用相同选项

    In Perl getopts 是否可以多次使用相同的选项但具有不同的值 我想为用户提供输入不同网格坐标的选项 但使用相同的选项名称以最大程度地减少混乱 Ex my grid pl coords 10 12 coords 18 30 coo
  • 使用 AWT Robot 在 Mac 上切换应用程序有时有效

    我正在尝试使用机器人来切换应用程序 然后输入一些文本 为此 在我的 Mac 上 我按 Meta Tab 然后按以下顺序释放 Tab Meta Robot robot new Robot robot keyPress KeyEvent VK
  • 刚性类型变量不匹配

    我有以下失败的 Haskell 代码Couldn t match type a with a1 error bar Int gt a gt Int gt a gt a gt a bar ns fp ap snd foldl fn fp ap
  • 如何使用Python只读取目录中的wav文件?

    from scipy io wavfile import read files f for f in os listdir if os path isfile f print files for i in range 0 1 w read
  • 自动映射器 - 继承映射器不与类型转换器一起使用

    不能同时使用映射继承和 TypeConverter 我有这个代码 BaseClassTypeConverter cs public class BaseClassTypeConverter ITypeConverter
  • TRUE 用作矩阵索引时如何解释?

    我在某处看到一些 错误的 代码 结果调用了一个执行的函数mymatrix TRUE 一路上 事实证明 至少在我测试的样本中 这被解释为选择矩阵的所有元素 清楚地 不是胁迫TRUE to 1 因为那样我只会得到返回的第一个元素 而不是整个矩阵
  • PlayN 字体支持

    PlayN 或支持库 如 TriplePlay 等 对非标准字体 特别是自定义 TrueType 字体 提供何种支持 您必须在要使用的每个后端上以不同的方式注册字体 但是一旦按名称注册了字体 您就可以像任何内置字体一样使用它 只需调用Pla
  • 如何在片段内实现viewpager?

    我一直在寻找并很难找到一个明确的例子 我试图了解如何在从我的 mainActivity 作为抽屉项目打开的片段中创建视图分页器 这是我的尝试 但我认为我做错了什么 无论是我错误地包含它还是将它放在错误的位置 public class Ran
  • 如何根据组合框选择更改多个标签?

    我希望你知道如何根据不同的标签在不同的标签中拥有多个值Combobox下拉列表选择 例如 假设您有一个Combobox与值 car house computer 和多个Label选择时反映不同尺寸和颜色Combobox 如果我选择car 我
  • 极坐标图在 matplotlib 中给出错误的角度

    我正在尝试用Python绘制赤经 赤纬极坐标图 其中角度表示赤经 半径表示赤纬 范围在 30之间 我的代码是 import numpy import matplotlib pyplot as pyplot ra 345 3895474541
  • 无论如何,保持导航栏中的 Bootstrap Dropdown 打开

    我有一个嵌套在导航栏中的下拉菜单 我在页面加载期间通过添加以下内容打开该菜单open类到li包含下拉菜单的元素 我希望无论用户单击什么内容或单击页面上的哪个位置 此菜单都保持打开状态 我尝试过在 Stackoverflow com 上找到的
  • 如果添加另一个数据流,解析器无法解析

    我正在尝试使用解析器来根据路由保存的给定参数检索数据 不幸的是 当我添加另一个数据流时 我的数据依赖于解析器 但实际上从未解析 如果我直接返回一个立即解析值 一切都会正常 我调试了这种情况 发现我收到了所有部分信息 但最终未能真正解决 这是
  • 使用 compgen 获取另一个命令的自动完成功能,使用哪个标志?

    我有一个自定义自动完成命令 称之为commandA in commandB我想窃取命令第一个参数的自动完成选项 因此 例如 commandA 的 argument1 的选项是 abcdef abcabc abc123 我想要类似的东西com
  • ActiveMQ 的 NoSuchMethodError

    java lang NoSuchMethodError org apache activemq thread TaskRunnerFactory setThreadClassLoader Ljava lang ClassLoader V a
  • 侧面加载即时应用程序失败:读取捆绑包超时

    无法使用 Android 模拟器来测试即时应用程序 每次我得到 侧面加载即时应用程序失败 读取捆绑包超时 我在用着 Android Studio 3 0 金丝雀 5 Emulator 运行 Android 6 0 API 级别 23 x86
  • 如何使用流畅的 NHibernate 将枚举映射为 int 值?

    问题确实说明了一切 默认情况下它映射为string但我需要它映射为int 我目前正在使用PersistenceModel如果这有什么区别的话 我可以设定我的惯例 Update发现从主干获取最新版本的代码解决了我的困境 定义这个约定的方式以前
  • 如何从自定义视图(NSView)中制作缩略图视图?

    如何制作缩略图视图 不是图像 形成自定义视图 NSView 如果自定义 NSView 的内容发生更改 缩略图视图也会发生更改 看起来像ibook作者 谢谢大家 https plus google com u 0 photos 1147559
  • 用于生成唯一 ID 的 iOS 硬件参数

    您好 我想使用任何设备硬件参数为 iOS 设备生成一个唯一的 ID 我不想使用 MAC 地址 因为 MAC 地址也有可能被更改 那么您能否告诉我是否有任何其他唯一的硬件参数可以用来生成唯一的 ID 我相信类似的事情this是普遍接受的 UU
  • 无法对已卸载的组件执行 React 状态更新。这是一个无操作

    这是控制台中的警告 警告 无法对已卸载的组件执行 React 状态更新 这是一个空操作 但它表明应用程序中存在内存泄漏 要修复此问题 请取消 useEffect 清理函数中的所有订阅和异步任务 这是我的代码 const index setI