无法对已卸载的组件执行 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 Native Android:app:compileDebugJava 错误

    当我运行react native run android时 出现以下错误 我正在将其设置为在设备上运行 app compileDebugJava Users hello MediaFire apps test2 android app sr
  • Flux + React.js - 操作中的回调是好还是坏?

    让我解释一下我最近遇到的问题 我有 React js Flux 驱动的应用程序 有一个列表显示文章数量 注意 应用程序中有多个不同的列表 和文章详情查看在里面 但每个列表只有一个 API 端点 它返回文章数组 为了显示我需要的详细信息fin
  • 如何访问另一个 mobx 商店中的 mobx 商店?

    假设以下结构 stores RouterStore js UserStore js index js each of Store jsfiles 是一个 mobx 存储类 包含 observable and action index js只
  • 微前端架构中如何共享redux store?

    我正在尝试创建一个小项目来实现微前端架构 如下微前端 https martinfowler com articles micro frontends html文章 我正在为每个 MFE 微前端 创建多个存储库 并为该应用程序使用 Redux
  • Material-UI 4.8.1 API 更改 - 指定“组件”属性的新方法?

    Edit 这是 4 8 x 的打字错误 升级到 4 9 0 即可解决该问题 上版本4 8 0 以下代码编译并运行良好
  • 如何在 React js 上使用历史记录重定向到另一个页面?

    我在前端使用 Reactjs 并在后端使用 Laravel 开发了一个注册页面 我希望当我单击注册按钮时 它将被重定向到我的登录页面 我的注册组件是 handleSubmit event gt event preventDefault co
  • React.js 和 Ajax 之间的区别

    当我在 google 上搜索 React js 时 我得到的是 React js 是一个用于创建用户界面的框架 如果网站的某个特定部分经常更新 则意味着我们可以使用 React 但我很困惑 Ajax 仅用于此目的 我们可以使用 Ajax 更
  • 内容丰富的 api markdown 转换为 HTML

    有没有什么简单的方法可以将 Markdown 文本从 Contentful api 转换为 html 代码以显示在 html 页面上 我尝试过使用 pagedown 和一些类似的技术 但似乎没有一个对我有用 我是 Contentful 的客
  • React-Router v5 History.push 不触发组件

    很抱歉朋友们又问这个问题了 我找到了解决这个问题的几个方法 但他们让我很困惑 我只是想问一个优雅的方法来做到这一点 正如你通过标题所理解的 我有一个关于反应路由的问题 让我解释 我有一个按钮 其名称是Login 单击按钮后 我执行了一些逻辑
  • React Native / Laravel - 向 API 发送请求

    我正在实现一个移动应用程序 它使用 Laravel 作为 API 与数据库进行通信 我想将用户名和密码从我的 React Native 应用程序发送到 Laravel 我正在使用以下代码来执行此操作 fetch mysite com api
  • 将复活的 v1 数学转换为 v3

    我想使用 Reanimated v3 来使用Shared Element Transition功能 但升级后出现很多错误 例如 const animatedTranslateX multiply cond greaterThan x thr
  • 如何使用 setState 插入 React 的状态数组?

    我正在寻找在反应中修改和数组并在特定索引上插入元素 这就是我的状态 this state arr 我想做的是编译这个arr index random element 反应 js setState 语法 我试图做的是 this setStat
  • 如何通过比较React中同一数组中的Id和reference_id来重新排序数组列表

    这是我得到的数组 id 1 name hello world reference id null id 2 name hello world reference id null id 3 name hello world reference
  • “React”在定义之前就被使用了

    我正在使用 create react app typescript eslint 应用程序 在构建过程中出现这样的错误 Line 1 8 React was used before it was defined typescript esl
  • 如何为 React 组件参数创建文字类型?

    我创建了 SelectProps 界面 export interface SelectProps value string options string onChange value any gt void 我创建了反应组件
  • 在reactjs中发生状态改变后调用函数

    我的问题是这样的 我有两个组件 第一个组件是图像裁剪器 第二个组件是我应该显示裁剪图像的组件 我面临的问题是我可以将裁剪后的图像传递到第二个组件 但我必须按下裁剪图像并传递到第二个组件的按钮两次 在第二次单击时 只有我的图像传递到第二个组件
  • React:搜索过滤器无法正常工作

    我通过 API 从服务器获取记录 API 是在 Loopback 中构建的 实际上 我在每个页面上显示 5 条记录 目前工作正常 我可以导航next or prev通过分页按钮 每页显示 5 条记录 问题是 当用户在搜索框中键入内容时 记录
  • 在非输入元素上反应 onKeyDown/onKeyUp 事件

    我需要捕获 cmd 按钮向上和向下事件 以便选择是否在 setState 中使用串联 例如 我如何在表元素上获取这些事件 您必须在主体 窗口级别捕获按键 表元素没有输入焦点 因此您无法从表中捕获键 没有输入元素 var cmdDown fa
  • 从本机代码访问 AsyncStorage

    我需要使用 JS 代码中的 AsyncStorage 将数据保存在本地存储中 我想知道是否有一种方法可以从本机代码 Objective C 或 Java 访问 AsyncStorage 存储的数据 Thanks 如果你导入RCTAsyncL
  • 新部署后,React 应用程序必须清除浏览器缓存

    我们正在使用 Jenkins 管道在 apache 服务器上部署 React 应用程序 当我们部署新代码时 大多数新功能都可以正常工作 但并非所有更改都反映浏览器中的最新内容 用户必须打开隐身窗口或清除缓存才能看到新功能 我见过一些相关的解

随机推荐

  • 对 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