Question

我想在我的componnent中输出当前日期。在控制台中我的代码可以工作，但React控制台说：

“bundle.js：14744 Uncaught RangeError：超出最大调用堆栈大小”

我的组件看起来像这样：

import React from 'react';
var FontAwesome = require('react-fontawesome');

export class Date extends React.Component {
    constructor() {
        super();

        var today = new Date(),
            date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();

        this.state = {
            date: date
        };
    }

    render() {
        return (
            <div className='date'>
                <FontAwesome name='calendar' />{this.state.date}
            </div>
        );
    }
}

是的，我知道我是一个很初学者，但也许有人可以帮助我。我用谷歌搜索了几个小时-.-

很多！

Answer 1

您的问题是您正在命名组件类Date。当您在班级中调用new Date()时，它不会创建您希望它创建的Date实例（可能是this Date） - 它会尝试创建一个实例你的组件类。然后构造函数将尝试创建另一个实例，另一个实例和另一个实例......直到你的堆栈空间用完并得到你看到的错误。

如果您想在课程中使用Date，请尝试为您的课程命名不同的内容，例如Calendar或DateComponent。

这样做的原因是JavaScript如何处理名称范围：每当您创建一个新的命名实体时，如果在范围内已经有一个具有该名称的实体，该名称将停止引用前一个实体并开始引用您的新实体实体。因此，如果在名为Date的类中使用名称Date，则名称Date将引用该类，而不引用在类定义之前存在的任何名为Date的对象启动。

Answer 2

简单的解决方案是

{new Date().toLocaleString() + ''}

Answer 3

选项1 ：如果您想创建一个通用的实用程序功能，则可以使用此

export function getCurrentDate(separator=''){

let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth() + 1;
let year = newDate.getFullYear();

return `${year}${separator}${month<10?`0${month}`:`${month}`}${separator}${date}`
}

并通过将其导入为

来使用它

import {getCurrentDate} from './utils'
console.log(getCurrentDate())

选项2 ：或直接在班级中定义和使用

getCurrentDate(separator=''){

let newDate = new Date()
let date = newDate.getDate();
let month = newDate.getMonth() + 1;
let year = newDate.getFullYear();

return `${year}${separator}${month<10?`0${month}`:`${month}`}${separator}${date}`
}

Answer 4

您可以使用react-moment软件包

-> https://www.npmjs.com/package/react-moment

将文件的下一行放入

public static void main(String[] args) throws Exception {
    List<String> stringList = new ArrayList<>();
    Scanner sc = new Scanner(new BufferedReader(new FileReader("A1.txt")));
    while (sc.hasNext()) {
        stringList.add(sc.nextLine());
    }
    int rows = stringList.size();
    int cols = 0;
    if (rows > 0) {
        cols = stringList.get(0).length();
    }
    char[][] auditorium = new char[rows][cols];
    for (int i = 0; i < rows; i++) {
        for (int j = 0; j < cols; j++) {
            auditorium[i][j] = stringList.get(i).charAt(j);
        }
    }
}

Answer 5

我的小改进

getCurrentDate(separator=''){

let newDate = new Date()
let date_raw = newDate.getDate();
let month_raw = newDate.getMonth() + 1;
let year = newDate.getFullYear();
var date, month
  
if (date_raw<10)  {  date ="0"+date_raw.toString()} else {  date =date_raw.toString()}
if (month_raw<10)  {  month ="0"+month_raw.toString()} else {  month =month_raw.toString()}


return (
    <div>{year}{separator}{month}{separator}{date}</div>
            );
}

Answer 6

完整的日期和时间：

{new Date().toLocaleString() + ""}

仅提取月份（当前）：

{new Date().toLocaleString("en-US", { month: "long" })}

仅提取一天：

{new Date().toLocaleString("en-US", { day : '2-digit})}

仅提取年份：

{new Date().getFullYear()}

React JS获取当前日期

6 个答案: