新日期（）；在 React 中导致循环和崩溃。为什么？答案

【问题标题】：new Date(); in React causing loop and CRASH. why?新日期（）；在 React 中导致循环和崩溃。为什么？
【发布时间】：2022-02-11 06:17:08
【问题描述】：

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

import "./Date.css";
import "./Home.css";

export default function Date(props) {
  const [dateState, setDateState] = useState(new Date());
  useEffect(() => {
    setInterval(() => setDateState(new Date()), 30000);
  }, []);
  if (props.active) {
    return (
      <div className="Date popup">
        <p>TODAYS DATE WILL GO HERE</p>
        <p>
          {" "}
          {dateState.toLocaleDateString("en-GB", {
            day: "numeric",
            month: "short",
            year: "numeric",
          })}
        </p>
        <p>THE TIME WILL GO HERE HH:MM:SS</p>
        <p>
          {dateState.toLocaleString("en-US", {
            hour: "numeric",
            minute: "numeric",
            hour12: true,
          })}
        </p>
      </div>
    );
  } else return null;
}

我正在尝试在 React 中实现 javascript Date() 方法，无论何时尝试，它都会导致应用程序崩溃。我在控制台中遇到错误。

未捕获的 RangeError：超出最大调用堆栈大小

即使我尝试执行如下简单的操作，它仍然会崩溃。

let now = new Date();
console.log(now)

链接到回购https://github.com/mariaalouisaa/3-in-1-react.git

提前致谢！

【问题讨论】：

您将组件命名为Date。这会影响全局......如果你重命名你的组件，你应该没问题。

标签： javascript reactjs date

【解决方案1】：

你为你的函数组件声明 Date 名称。（与 JavaScript Date 函数名称相同！）你在你的函数组件中调用它，创建一个无限循环！重命名你的函数组件。

【讨论】：

当然！！我怎么会错过……非常感谢！