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();