如何在反应中使用 Hook 进行 d-day 计数？答案

【问题标题】：how to useHook for d-day count in react?如何在反应中使用 Hook 进行 d-day 计数？
【发布时间】：2021-05-27 10:25:38
【问题描述】：

当我点击帖子时，屏幕将导航到“帖子详细信息屏幕”。在“发布详细信息屏幕”中，有一个计时器可以计算当前时间和未来时间之间的时间。

我已经做了定时器功能，做得很好！

但是，当我点击一个帖子时，

第一次做的时候，0:0:0:0出来，要重新渲染的时间，34:11:32:23

我该如何解决这个 0:0:0:0？我想让它在 34:11:32:23 的同时立即出来

... react function component...

 const [day, setDay] = useState<string | number>(0);
  const [hour, setHour] = useState<string | number>(0);
  const [min, setMin] = useState<string | number>(0);
  const [sec, setSec] = useState<string | number>(0);

  const calcuateGapBetweenDates = () => {
    const b1 = new Date();
    const b2 = new Date(endDate);  // endDate = 2021-03-30T17:00:00.000Z
    const c1 = b1.getTime(); // 1613582634000
    const c2 = b2.getTime(); // 1613582634000
    const gap = c2 - c1;

    setDay(() => {
      const temp = Math.ceil(gap / (1000 * 60 * 60 * 24));
      return temp < 10 ? `0${temp}` : temp;
    });

    setHour(() => {
      const temp = Math.ceil((gap % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      return temp < 10 ? `0${temp}` : temp;
    });

    setMin(() => {
      const temp = Math.ceil((gap % (1000 * 60 * 60)) / (1000 * 60));
      return temp < 10 ? `0${temp}` : temp;
    });

    setSec(() => {
      const temp = Math.ceil((gap % (1000 * 60)) / 1000);
      return temp < 10 ? `0${temp}` : temp;
    });
  };

  useLayoutEffect(() => {
    const setIntervalForEverySecond = setInterval(() => {
      calcuateGapBetweenDates();
    }, 1000);
    return () => clearInterval(setIntervalForEverySecond);
  }, []);

return ( 
      <View>
         <Text>
            {day} :
            {hour}:
            {min}:
            {sec}
          </Text>
      </View>
)

【问题讨论】：

标签： react-native timer setinterval use-effect dday

【解决方案1】：

你用 0 初始化你的状态值，这就是为什么当屏幕加载时你会看到

0:0:0:0

  const [day, setDay] = useState<string | number>(0);
  const [hour, setHour] = useState<string | number>(0);
  const [min, setMin] = useState<string | number>(0);
  const [sec, setSec] = useState<string | number>(0);

因此，在更改状态后（使用 setDay、setHour 等），值不再是初始值，而是新值。

为了解决此问题，您必须使用所需的值初始化您的状态

【讨论】：