渲染太多，反应 useInterval

Question

我的 useInterval 钩子有以下问题，我试图让计数器在计数达到 20 时停止，但似乎我当前实现它的方式似乎会导致渲染无限循环。到目前为止，这是我的代码：

    import React, { ChangeEvent, useState } from "react";

import { useInterval } from "usehooks-ts";

export default function Component() {
  // The counter
  const [count, setCount] = useState<number>(0);
  // Dynamic delay
  const [delay, setDelay] = useState<number>(1000);
  // ON/OFF
  const [isPlaying, setPlaying] = useState<boolean>(true);

  useInterval(
    () => {
      // Your custom logic here
      setCount(count + 1);
    },
    // Delay in milliseconds or null to stop it
    isPlaying ? delay : null
  );

  if (count === 10) {
    setPlaying(false);
  }

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setDelay(Number(event.target.value));
  };

  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setPlaying(!isPlaying)}>
        {isPlaying ? "pause" : "play"}
      </button>
      <p>
        <label htmlFor="delay">Delay: </label>
        <input
          type="number"
          name="delay"
          onChange={handleChange}
          value={delay}
        />
      </p>
    </>
  );
}

我无法理解为什么这不起作用，有人可以解释并告诉我我做错了什么吗？

Answer 1

代码中的以下块是导致无限循环的原因，因为在计数为 10 且计数器暂停后的每次渲染中，每次都会执行 setPlaying(false) 并导致每次重新渲染，从而导致无限循环

 if (count === 10) {
    setPlaying(false);
 }

相反，您可以将此块移动到使用效果，如

  useEffect(() => {
    if (count === 10) {
      setPlaying(false);
    }
  }, [count]);

Please find codesandbox 供参考

Answer 2

使用 useEffect 钩子：

useEffect(() => {
if (count === 10) {
    setPlaying(false);
  }
}, [count])

每次 count 更改时，useEffect 都会触发并检查 count 是否达到 10。

您还可以阻止用户更改高于 10 的状态：

<button onClick={() => setPlaying(count === 10 ? false : !isPlaying)}>

Answer 3

每个更新状态或属性都会导致创建一个新的间隔。

如果您必须使用间隔，

let myinterval = useInterval(
    () => {
      // Your custom logic here
      setCount(count + 1);
    },
    // Delay in milliseconds or null to stop it
    isPlaying ? delay : null
  );
clearInterval(myinterval);

请将此代码放入 useEffect

useEffect(()=>{
if(count <20){
let myinterval = useInterval(
    () => {
      // Your custom logic here
      setCount(count + 1);
    },
    // Delay in milliseconds or null to stop it
    isPlaying ? delay : null
  );

clearInterval(myinterval);
}
},[count])