Question

我使用setTimeout进行了简单的动画处理，但是在控制台中出现红色警告：

1警告：无法在未安装的状态下执行React状态更新零件。这是空操作，但表示您的内存泄漏应用。要修复，请取消所有订阅和异步任务在useEffect清理功能中。在家里（由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]);

Answer 1

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

尝试一下

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

1 个答案: