ReactJS setInterval不会在Safari中重新渲染

问题描述

我有这段代码可以在我的网站上进行倒计时，时间从5到0秒：

const {useState,useCallback,useEffect} = React;
const Counter = ({isPlaying}) => {
  const [seconds,setSeconds] = useState(5);
  const [paused,setPaused] = useState(false);

  const toggle = useCallback(() => {
    setPaused(!paused);
  },[paused,setPaused]);

  useEffect(() => {
    const interval = setInterval(() => {
      if (isPlaying && seconds > 0 && !paused) {
        setSeconds(seconds => seconds - 1);
        console.log('bla');
      }
    },1000);
    return () => clearInterval(interval);
  },[seconds,isPlaying,paused]);

  return (
    <span className="count-down" id="count-down" onClick={toggle}>
        <span>00</span>
        <span>:</span>
        <span>0<span id="sec-count">{seconds}</span></span>
    </span>
  );
}

ReactDOM.render(<Counter isPlaying={true}/>,document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

在功能组件中。

在Chrome和Firefox中

可以正常工作。它从5倒数到0，并且您在控制台中看到“ bla” 5次。但是在Safari中，它不会重新渲染。它仅倒计时一次或两次，因此显示3或4，此后它将停止重新渲染。但是控制台仍然显示“ bla” 5次。

有什么主意，为什么即使间隔明显仍在运行，它仍在Safari中停止重新渲染？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript reactjs reactjs