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

【问题标题】：is it possible to cancel the subscription from a setCounter with a cleanup function in useEffect hook?是否可以使用 useEffect 挂钩中的清理功能从 setCounter 取消订阅？
【发布时间】：2020-07-20 10:36:10
【问题描述】：

我使用 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]);

【问题讨论】：

只需从useEffect 返回一个函数进行清理。看看这个：reactjs.org/docs/hooks-effect.html#example-using-hooks-1

标签： reactjs react-hooks use-effect

【解决方案1】：

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

试试这个

【讨论】：

reactjs.org/docs/hooks-effect.html#example-using-hooks-1 解释它