Javascript 如何在React JS中实时显示时间和日期？ 简报：

您好，我已经创建了一个hook

useDate（）

来显示当前的时间和日期，如下所示：

interface ReturnDate {
  time: string;
  date: string;
  wish: string;
}

export const useDate = (): ReturnDate => {
  const locale = 'en';
  const today = new Date();

  const day = today.toLocaleDateString(locale, { weekday: 'long' });
  const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}\n\n`;

  const hour = today.getHours();
  const wish = `Good ${(hour < 12 && 'Morning') || (hour < 17 && 'Afternoon') || 'Evening'}, `;

  const time = today.toLocaleTimeString(locale, { hour: 'numeric', hour12: true, minute: 'numeric' });

  return {
    date,
    time,
    wish,
  };
};

const ProfileGreetings: FC = () => {
  const { firstName } = useUserDetails();
  const { date, time, wish } = useDate();

  return (
    <div className="greetings-container">
      <h1>
        {wish}
        <PrimaryText text={`${firstName || ''}!`} />
      </h1>

      <div>
        <h3>
          {date}
          <br />
          {time}
        </h3>
      </div>
    </div>
  );
};

接口返回日期{
时间：字符串；
日期：字符串；
愿望：弦；
}
export const useDate=（）：ReturnDate=>{
const locale='en'；
const today=新日期（）；
const day=today.toLocaleDateString（区域设置，{weekday:'long'}）；
const date=`${day}，${today.getDate（）}${today.toLocaleDateString（区域设置，{month:'long'}）}\n\n`；
const hour=today.getHours（）；
const wish='Good${（小时<12&&'上午]| | |（小时<17&'下午]| |'晚上'}，`；
const time=today.toLocaleTimeString（区域设置，{hour:'numeric'，hour12:true，minute:'numeric'}）；
返回{
日期，
时间
希望
};
};

我在下面的组件中使用它，如下所示：

interface ReturnDate {
  time: string;
  date: string;
  wish: string;
}

export const useDate = (): ReturnDate => {
  const locale = 'en';
  const today = new Date();

  const day = today.toLocaleDateString(locale, { weekday: 'long' });
  const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}\n\n`;

  const hour = today.getHours();
  const wish = `Good ${(hour < 12 && 'Morning') || (hour < 17 && 'Afternoon') || 'Evening'}, `;

  const time = today.toLocaleTimeString(locale, { hour: 'numeric', hour12: true, minute: 'numeric' });

  return {
    date,
    time,
    wish,
  };
};

const ProfileGreetings: FC = () => {
  const { firstName } = useUserDetails();
  const { date, time, wish } = useDate();

  return (
    <div className="greetings-container">
      <h1>
        {wish}
        <PrimaryText text={`${firstName || ''}!`} />
      </h1>

      <div>
        <h3>
          {date}
          <br />
          {time}
        </h3>
      </div>
    </div>
  );
};

const profile问候语：FC=（）=>{
const{firstName}=useUserDetails（）；
const{date，time，wish}=useDate（）；
返回(
{wish}
{date}


{time}
);
};

应用程序中的日期/时间格式： 8月2日星期日

晚上11:54

问题陈述： 目前的情况是，直到我刷新页面，日期和时间才会更新。是否有任何方法可以实时更新以下所有内容

我想在每1分钟后使用间隔来计算更新的时间和日期，但不知道这是否是个好主意。我也不知道如何开始，以及如何清除间隔

---

谢谢！：）

由于可以在自定义钩子中使用钩子，因此可以创建一个间隔来每分钟更新一次，如下所示：

export const useDate = () => {
  const locale = 'en';
  const [today, setDate] = React.useState(new Date()); // Save the current date to be able to trigger an update

  React.useEffect(() => {
      const timer = setInterval(() => { // Creates an interval which will update the current data every minute
      // This will trigger a rerender every component that uses the useDate hook.
      setDate(new Date());
    }, 60 * 1000);
    return () => {
      clearInterval(timer); // Return a funtion to clear the timer so that it will stop being called on unmount
    }
  }, []);

  const day = today.toLocaleDateString(locale, { weekday: 'long' });
  const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}\n\n`;

  const hour = today.getHours();
  const wish = `Good ${(hour < 12 && 'Morning') || (hour < 17 && 'Afternoon') || 'Evening'}, `;

  const time = today.toLocaleTimeString(locale, { hour: 'numeric', hour12: true, minute: 'numeric' });

  return {
    date,
    time,
    wish,
  };
};

导出常数useDate=（）=>{
const locale='en'；
const[today，setDate]=React.useState（new Date（））；//保存当前日期以触发更新
React.useffect（（）=>{
const timer=setInterval（（）=>{//创建一个每分钟更新当前数据的间隔
//这将触发每个使用useDate钩子的组件的重新加载。
设置日期（新日期（））；
}, 60 * 1000);
return（）=>{
clearInterval（timer）；//返回函数以清除计时器，以便在卸载时停止调用它
}
}, []);
const day=today.toLocaleDateString（区域设置，{weekday:'long'}）；
const date=`${day}，${today.getDate（）}${today.toLocaleDateString（区域设置，{month:'long'}）}\n\n`；
const hour=today.getHours（）；
const wish='Good${（小时<12&&'上午]| | |（小时<17&'下午]| |'晚上'}，`；
const time=today.toLocaleTimeString（区域设置，{hour:'numeric'，hour12:true，minute:'numeric'}）；
返回{
日期，
时间
希望
};
};

从“React”导入React；
从“react dom”导入react dom；
const date=new date（）.toLocaleDateString（）；
常量时间=新日期（）.toLocaleTimeString（）；
ReactDom.render(
今天的日期是{date}

今天的时间是{time}

, 
document.getElementById（'root'）；
输出
今天的日期是2020年8月14日
今天的时间是下午7:42:01

选择时间间隔的持续时间时，要记住什么样的错误是可以容忍的，因为如果在真正的分钟切换前一毫秒启动组件，60秒的持续时间可能会长达60秒-1毫秒。这就是为什么许多人选择较小的持续时间，例如15秒或1秒，因为这将确保组件显示的时间精确到+-持续时间。@jaredgorski这是绝对正确的。而且我在想，30秒后，分钟会从00:30增加到01:00。但当我选择60秒作为间隔时，在我的组件中更新分钟时，实际的实时分钟是01:30。因此，30秒的错误。@Domino987这个解决方案对我来说是绝对有希望的。我想知道是否可以将return语句转换为usemo钩子。有可能吗？是的，我同意上面提到的时间问题，应该根据您的需要进行调整。也许你可以尝试一些适合你的时间。你为什么需要一份备忘录？你能接受这个答案以便其他人能找到正确的解决方案吗？Rajan，你能解释一下它是如何实时显示更新的吗？