React报错：Objects are not valid as a React child（Date对象）求助

错误原因很明确：你在ExpenseItem组件里直接渲染了Date对象，React不允许把JavaScript对象作为子元素输出，必须先转换成字符串或格式化后的文本。

修改方案 #

在ExpenseItem组件中，把props.date转换成可读的日期字符串再渲染，推荐用toLocaleDateString()做本地化格式化，或者根据需求自定义格式。

修改后的ExpenseItem代码：

import React from "react";
import classes from "./ExpenseItem.module.css"

function ExpenseItem(props) {
  // 格式化日期为中文本地化格式，比如"2020年8月14日"
  const formattedDate = props.date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });

  return (
    <div className={classes["expense-item"]}>
      <div>{formattedDate}</div>
      <div className={classes["expense-item__description"]}>
        <h2>{props.title}</h2>
        <div className={classes["expense-item__price"]}>${props.amount.toFixed(2)}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

额外优化 #

给金额amount加上toFixed(2)，确保显示两位小数，符合货币展示规范。

你的App组件逻辑没问题，问题完全出在ExpenseItem对date属性的处理上。

内容的提问来源于stack exchange，提问作者ishika