javascript - 在滚动事件上监听的函数中未更新 React Hook

Question

我有一个函数 handleScroll，它在滚动事件上被监听。此函数必须更新 isFetching(开始时为 false，并且必须更改 bool 值)。

函数 handleScroll 被正确监听，如 console.log 所示。但是，isFetching 始终为 false。似乎从未读取过 setIsFetching。我认为，另一种选择类似于 eventListener 卡住 handleScroll 函数的第一个版本。

我该怎么做才能更新该函数中的 Hook ？这是代码的简化版本和 codesandbox :

/* <div id='root'></div> */
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const debounce = (func, wait, immediate) => {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      timeout = null;
      if (!immediate) func.apply(context, args);
    }, wait);
    if (immediate && !timeout) func.apply(context, args);
  };
};
const App = () => {
  const [isFetching, setIsFetching] = useState(false);
  const handleScroll = debounce(() => {
    setIsFetching(!isFetching);
    console.log({ isFetching });
  }, 300);
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
  return <div style={{ height: "1280px" }}>Hello world</div>;
};
const root = document.getElementById("root");
if (root) ReactDOM.render(<App />, root);

---

更新

我在 useEffect 中放置了一个空数组作为第二个参数，因为我希望第一个参数函数仅在 componentDidMount() 上触发一次

Answer 1

添加 isFetching 作为对 useEffect 的依赖

虽然我无法提供深入的解释，但我可以说您在 useEffect 中基本上是在欺骗 React，因为您说效果不依赖于任何东西，而是提供一个空的依赖项数组传递效果中包含的所有变量总是好的。

每次组件重新渲染时，您也创建一个新函数，以避免这种情况将函数移动到useEffect中或将其包装在useCallback中。除非依赖项数组中的某些内容发生变化，否则不会创建重新创建函数

useEffect(
  () => {
    const handleScroll = debounce(() => {
      setIsFetching(prevState => !prevState);
      console.log({ isFetching });
    }, 300);
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  },
  [isFetching]
);

或用useCallback

const handleScroll = useCallback(
  debounce(() => {
    setIsFetching(prevState => !prevState);
    console.log({ isFetching });
  }, 300),
  [isFetching]
);

useEffect(
  () => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  },
  [isFetching]
);

complete guide to useEffect