javascript - React Typescript 日期时间组件 (TypeError: Date 不是构造函数)

我正在尝试使用 TypeScript 创建一个 React 组件。但出现了一些类型错误。我正在使用 Nextjs 和 TypeScript。实际上，我想同时显示时间和日期。但当我使用 new Date() 函数时，会显示一个错误信息。

const Date: () => JSX.Element
'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.

这是我的代码

import React, { FC, ReactNode, useEffect, useState } from 'react'
import banner from "../assets/banner.png"
import Image from 'next/image'

const Date = (): JSX.Element => {
    const dateTime = new Date();
    const [clock, setClock] = useState<string>(dateTime.toLocaleDateString());
    

    useEffect(() => {
        const clock = setInterval(
            (): void => setClock(dateTime.toLocaleTimeString()),
            1000
        );

        return () => {
            clearInterval(clock);
        };
    }, []);

    return (
        <div className='w-full relative mb-3'>
            <Image
                className='rounded-xl w-full mx-auto'
                src={banner}
                alt="banner"
                width={700}
                height={240}
            />
            <div className='absolute rounded-xl w-full flex items-center h-full p-4 top-0 left-0'>
                <div className='ml-0 sm:ml-3'>
                    <h1 className='text-3xl md:text-4xl lg:text-6xl text-white font-bold'>
                        {new Date().toLocaleDateString(undefined, {
                            weekday: "long",
                            year: "numeric",
                            month: "long",
                            day: "numeric",
                        })}
                    </h1>
                    <p className='sm:text-xl mt-3 text-white font-bold'>{clock}</p>
                </div>
            </div>
        </div>
    )
}

export default Date

答案＃1

你的组件名为 Date。所以当你尝试 const dateTime=new Date(); 时，JS 会尝试调用你的组件的构造函数，因此你会收到错误，因为它覆盖了 JS 的 Date 类。将你的组件重命名为其他名字，这样你就可以使用 JS 的 Date 类。

答案＃2

此错误发生是因为你重定义了 JavaScript 的 Date 构造函数，当你调用 const dateTime=new Date() 时，编译器会认为你使用的是上面定义的“Date 函数”。请尝试使用一个新的函数名称：

const myDate: () => JSX.Element