如何阻止 UseEffect 运行外部代码答案

【问题标题】：How to stop UseEffect from running outside code如何阻止 UseEffect 运行外部代码
【发布时间】：2021-12-09 19:11:49
【问题描述】：

我是 React Native 的新手。我有一个秒表，它每 10 毫秒在屏幕上重新渲染一次。但是，我在 useEffect 挂钩之外编写的函数也会每十秒调用一次。例如，我有一个功能，我只想在按下按钮时运行。 useEffect 中没有调用该函数，但它每 10 毫秒运行一次，即使未按下按钮也是如此。我怎样才能避免这个问题？

useEffect(() => {
    let interval = null;

    if (timerOn) {
      let startTime = new Date().getTime();
      interval = setInterval(() => {
        var currentTime = new Date().getTime() - startTime;
        setTime(
          `${padToTwo(Math.floor((currentTime / 3600000) % 24))}:${padToTwo(
            Math.floor((currentTime / 60000) % 60)
          )}:${padToTwo(Math.floor((currentTime / 1000) % 60))}:${padToTwo(
            currentTime % 100
          )}`
        );
      }, 10);
    } else {
      clearInterval(interval);
    }

    return () => clearInterval(interval);
  }, [timerOn]);

【问题讨论】：

请分享完整的组件，因为大多数情况下它与useEffect 无关，它很可能与组件中的其他内容有关

标签： reactjs use-effect

【解决方案1】：

你可以使用其他状态。

const [useOne,setUseOne] = useState<boolean>(true)

useEffect(() => {

if (useOne) {

let interval = null;

    if (timerOn) {
      let startTime = new Date().getTime();
      interval = setInterval(() => {
        var currentTime = new Date().getTime() - startTime;
        setTime(
          `${padToTwo(Math.floor((currentTime / 3600000) % 24))}:${padToTwo(
            Math.floor((currentTime / 60000) % 60)
          )}:${padToTwo(Math.floor((currentTime / 1000) % 60))}:${padToTwo(
            currentTime % 100
          )}`
        );
      }, 10);
    } else {
      clearInterval(interval);
    }

}
    
    return () => clearInterval(interval);
  }, [timerOn,useOne]);


....
<Button title="off" onPress={() => useOne(false)} />

【讨论】：