时间戳

首页 > 解决方案 > 是否可以使用 useEffect 挂钩中的清理功能从 setCounter 取消订阅？

reactjs - 是否可以使用 useEffect 挂钩中的清理功能从 setCounter 取消订阅？

问题描述

我使用 setTimeout 做了简单的动画，但在控制台中收到红色警告：

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

  useEffect(() => {
    counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
    if (counter <= 16 && counter > 8) {
      setFlexStyle({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "list-item",
      });
      setClassStyle("flex-active-slide");
      setFlexStyle2({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "none",
      });
      setClassStyle2("");
    } else if (counter <= 8 && counter > 0) {
      setFlexStyle({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "none",
      });
      setClassStyle("");
      setFlexStyle2({
        width: "100%",
        float: "left",
        marginright: "-100%",
        position: "relative",
        display: "list-item",
      });
      setClassStyle2("flex-active-slide");
    } else {
      setCounter(16);
    }
  }, [counter]);

标签： reactjsreact-hooksuse-effect

解决方案

useEffect(() => {
  const timer = counter > 0 ? setTimeout(() => setCounter(counter - 1), 1000) : null
  return () => clearTimeout(timer)
}, [counter] )

试试这个

推荐阅读