javascript - 无法使用 react Hook 之外的变量清除间隔

Question

我正在尝试在 clearTimer 方法中访问 clearTimerInterval 但变得未定义，从 React Hook 内部获取警告 变量将在每次渲染后丢失。在下面的代码中，useEffect 钩子(Hook)被调用一次，那么变量 clearTimerInterval 是如何未定义的？

function Child(props) {
          let [timerCount, setTimer] = useState(0);
          var clearTimerInterval;
          useEffect(() => {
            clearTimerInterval = setInterval(() => {
              setTimer(timerCount => {
                return timerCount + 1;

              });
            }, 1000);
            return () => {
              clearInterval(clearTimerInterval);
            };
          }, []);

          function clearTimer() {
            clearInterval(clearTimerInterval);
          }
          return (
            <div>
              <div>Timer {timer}</div>
              <button onClick={clearTimer}>ClearTimer</button>
            </div>
          );
        }

        export default React.memo(Child);

Answer 1

如果您需要在重新渲染时保存变量，请使用 useRef在这种情况下，它就像一个类实例字段，还请注意，对 refs 的更改不会触发重新渲染。

这将使您能够从 useEffect

外部清除间隔

function Child(props) {
  let [timerCount, setTimer] = useState(0)
  const intervalRef = useRef(null)

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setTimer(prevState => prevState + 1)
    }, 1000)

    return () => clearInterval(intervalRef.current)
  }, [])

  function clearTimer() {
    clearInterval(intervalRef.current)
    intervalRef.current = null
  }

  return (
    <div>
      <div>Timer {timerCount}</div>
      <button onClick={clearTimer}>ClearTimer</button>
    </div>
  )
}