问有问题的反应，创建一个时钟，可以手动改变时间。
EN

Stack Overflow用户

提问于 2020-12-04 00:53:34

回答 1查看 256关注 0票数 1

我正在尝试创建一个时钟，它将每秒钟运行一次，但也允许用户单击按钮将时钟向前移动一小时。

    const addTime = (date, time) => new Date(date.getTime() + time)
    
    const Clock = () => {
        const [timeDate, setTimeDate] = useState(addTime(new Date(), SECOND_IN_MS));

        const updateTimeInfo = (addedTime) => {
            setTimeDate(addTime(timeDate, addedTime);
            //other info omitted, won't affect the code
        }

        useEffect(() => {
            let tickClock = setInterval(() => {
               updateTimeInfo(SECOND_IN_MS)
            }, SECOND_IN_MS);

            return () => clearInterval(tickClock);
        }, [timeDate])
    
      
        return (
            <span>{timeDate.toLocaleTimeString([], { hour: '2-digit', hour12: true, minute: '2-digit' });</span>
            <button type="button" onClick={() => updateTimeInfo(HOUR_IN_MS)}>{"Add 1 hour"}</button>
        )
    }

现在的问题是，每当我将时钟更新为新的时间时，就会触发useEffect，并且时钟将重新建立每秒钟更新一次的间隔，导致时钟在1秒过去之前不会更新秒。

我希望时钟总是滴答1秒，但也允许用户同时快速前进1小时。

有可能让这一切成为可能吗？

javascript

reactjs

数字工厂场景解决方案

帮助企业实现数字化、智能化，解决企业工厂内设备数据采集、设备指标分析、企业信息系统间数据孤岛打通、数据应用困难的问题

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-04 01:27:37

从timeDate钩子中删除useEffect依赖项，并在updateTimeInfo中使用功能状态更新。

安装间隔一次，当组件挂载时，将清除函数返回到清除间隔。 useEffect () => { const tickClock = setInterval(() => { updateTimeInfo(SECOND_IN_MS)；}，SECOND_IN_MS)；返回() => clearInterval(tickClock)；}，[]；
功能状态更新允许每个排队的timeDate状态更新从前一个状态正确更新。 const updateTimeInfo = (addedTime) => { setTimeDate((timeDate) => addTime(timeDate，addedTime))；//其他省略的信息，不会影响代码}；

它的工作原理：

间隔每秒运行一次updateTimeInfo。该按钮也只是以异步方式调用updateTimeInfo，即每当单击+1小时按钮时。这两者应该是相互独立的。

如果没有函数状态更新，那么只有初始的timeDate状态值在效果上被关闭，而时间只会从初始状态值每次更新一次。

代码

const SECOND_IN_MS = 1000;
const HOUR_IN_MS = 1000 * 60 * 60;

const addTime = (date, time) => new Date(date.getTime() + time);

const Clock = () => {
  const [timeDate, setTimeDate] = useState(addTime(new Date(), SECOND_IN_MS));

  const updateTimeInfo = (addedTime) => {
    setTimeDate((timeDate) => addTime(timeDate, addedTime));
    //other info omitted, won't affect the code
  };

  useEffect(() => {
    const tickClock = setInterval(() => {
      updateTimeInfo(SECOND_IN_MS);
    }, SECOND_IN_MS);

    return () => clearInterval(tickClock);
  }, []);

  return (
    <>
      <span>
        {timeDate.toLocaleTimeString([], {
          hour: "2-digit",
          hour12: true,
          minute: "2-digit",
          second: "2-digit"
        })}
      </span>
      <button type="button" onClick={() => updateTimeInfo(HOUR_IN_MS)}>
        +1 hour
      </button>
      <button type="button" onClick={() => updateTimeInfo(-HOUR_IN_MS)}>
        -1 hour
      </button>
    </>
  );
};