Date() 构造函数使我的页面完全空白

Question

当我使用内置的 Date() 构造函数时，它会使我的页面完全空白

当前Output

预计 Output

import './ExpenseItem.css';

function ExpenseItem() {
 const expenseDate = new Date(2022, 1, 1)

  return (
      <div className='expense-item'>
          <div>{expenseDate}</div>
          <div className='expense-item__description'>
              <h2>Car Insurance</h2>
              <div className='expense-item__price'>$269.64</div>
          </div>
      </div>
  );
}

export default ExpenseItem; 

Answer 1

这是因为您试图将Date呈现为 React 子级，而Objects are not valid as a React child （空白屏幕背后的原因）。

将您的代码更改为：

const expenseDate = new Date(2022, 1, 1).toLocaleString();

通过这种方式，您将获得一个字符串，它是一个有效的 React 子代。

查看有关如何更改日期到字符串格式的文档：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

Answer 2

** 因为 Date 是 object 并且您不能将 object 渲染为孩子**

// toDateString()会将其转换为字符串。

const expenseDate = new Date(2022, 1, 1).toDateString();