reactjs 如何在不重新加载页面的情况下显示更新的变量值

wpcxdonn 于 2022-11-29 发布在 React

关注(0)|答案(1)|浏览(191)

我尝试让这个函数在每次“for循环”中的值（即“date”变量）发生变化时运行。
下面的函数的目的是计算下一个祷告时间。它查看对象中的祷告时间列表，然后与最接近当前时间的时间进行比较。当上一个祷告时间不再早于当前时间时，将显示最接近的时间，并重复该过程。

const [times, setTimes] = useState()
  const prayerData = timetable;
  let pinfo = {}

  function getNextPrayer() {

    for (const prayer in prayerData) {
      if (prayer.endsWith("_jammah")) {
        const jammahTime = dayjs(prayerData[prayer], 'hh:mm');
        if (dayjs().isBefore(jammahTime)) {
          setTimes(prayer)
          return {
            name: prayer,
            time: prayerData[prayer],
            remaining: jammahTime.toString()
          }
        }
      }
    }
  }

保存祈祷时间信息的对象：

const timetable = {
    "fajr_begins": "5:54",
    "fajr_jammah": "6:14",
    "zuhr_begins": "12:51",
    "zuhr_jammah": "13:30",
    "asr_begins": "15:28",
    "asr_jammah": "14:10",
    "maghrib_begins": "18:04",
    "maghrib_jammah": "19:49",
    "isha_begins": "19:27",
    "isha_jammah": "20:00"
}

我试图让页面重新呈现每一次'name'的值改变。一旦其中一个祈祷时间已经过去了当前时间和它的时间为下一个即将到来的祈祷，它只会显示这个下一个祈祷时，我重新加载页面。我想要的是这成为自动的，所以当它来到下一个祈祷，它应该会自动刷新并显示更新后的值。我尝试过通过state跟踪祈祷者的名字，并使用“usestate”来更新值，但它导致了无限循环。因为我正在循环遍历“timesteline”对象中的项（其中保存着所有祈祷的信息），如果我试图在这里更新状态，就会导致一个无限循环。

**EDIT：**当前时间是下午2：30，所以它显示'asr_jammah'为即将到来的祈祷。所以当祈祷时间超过当前时间，它应该移动到下一个祈祷，并显示为下一个即将到来的祈祷，而不必我重新加载页面，它显示这是它目前正在做的。

Screenshot of the application
如何重构这段代码，使其自动完成而不会导致无限循环？
任何帮助都是非常感谢的。

reactjs

来源：https://stackoverflow.com/questions/74586129/how-to-display-updated-variable-value-without-reloading-page

1条答案

按热度按时间

vwkv1x7d1#

这将根据时间呈现当前的祈祷文。请提供更多关于您要呈现的内容的信息。

import React, { useEffect, useState } from "react";

type prayerDataType = {
  fajr_begins: string;
  fajr_jammah: string;
  zuhr_begins: string;
  zuhr_jammah: string;
  asr_begins: string;
  asr_jammah: string;
  maghrib_begins: string;
  maghrib_jammah: string;
  isha_begins: string;
  isha_jammah: string;
};

const prayerData = {
  fajr_begins: "5:54",
  fajr_jammah: "6:14",
  zuhr_begins: "12:51",
  zuhr_jammah: "13:30",
  asr_begins: "15:28",
  asr_jammah: "14:10",
  maghrib_begins: "18:04",
  maghrib_jammah: "19:49",
  isha_begins: "19:27",
  isha_jammah: "20:00",
};

const currentPrayer = () => {
  const [currentPrayer, setCurrentPrayer] = useState("");
  const [currentTime, setCurrentTime] = useState(new Date());

  function refreshClock() {
    setCurrentTime(new Date());
  }

  useEffect(() => {
    const timerId = setInterval(refreshClock, 1000);

    let currentAndPastPrayerDateTimes = [];
    for (const prayer in prayerData) {
      const prayerTime = prayerData[prayer as keyof prayerDataType];
      const [hours, minutes] = prayerTime.split(":");
      const prayerDateTime = new Date();
      prayerDateTime.setHours(parseInt(hours));
      prayerDateTime.setMinutes(parseInt(minutes));
      if (prayerDateTime <= currentTime) {
        currentAndPastPrayerDateTimes.push(prayerDateTime);
      }
    }

    const currentPrayerDateTime = new Date(
      Math.max(...currentAndPastPrayerDateTimes.map(Number))
    );
    const hours = currentPrayerDateTime.getHours();
    const minutes = currentPrayerDateTime.getMinutes();
    const currentPrayer = Object.keys(prayerData).find(
      (prayer) =>
        prayerData[prayer as keyof prayerDataType] === `${hours}:${minutes}`
    );

    setCurrentPrayer(currentPrayer ? currentPrayer : "");

    return function cleanup() {
      clearInterval(timerId);
    };
  }, []);

  return <div>{currentPrayer}</div>;
};

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 如何在不重新加载页面的情况下显示更新的变量值

1条答案

相关问题

热门标签

最新问答