0

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

我已经完成了计时器功能，而且做得很好！

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

第一次做的时候，出来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>
)
4

1 回答 1

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 等），该值不再是初始值，而是新值。

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

于 2021-02-25T07:46:10.753 回答