尝试下面的代码，并在使用props和object时注意：props.expense.date.toLocaleString
在课程中可能错过了**.expense代码将与或不与“？“符号作为 prop 。费用。日期？.toLocaleString**就像其他文章建议的那样。

import "./ExpenseItem.css";

function ExpenseItem(props) {
  const month = props.expense.date.toLocaleString("en-US", { month: "long" });
  const day = props.expense.date.toLocaleString("en-US", { day: "2-digit" });
  const year = props.expense.date.toLocaleString("en-US", { year: "numeric" });

  return (
    <div className="expense-item">
      <div>
        <div>{month}</div>
        <div>{day}</div>
        <div>{year}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

我也遇到了同样的错误：TypeError: Cannot read properties of undefined (reading 'toLocaleString')
在我的代码中

<div className="coin-data">
            <p className="coin-price">Rs.{price}</p>
             <p className="coin-volume">Rs.{volume.toLocaleString()}</p>
            {pricechange<0 ? (
                <p className="coin-percent red">{pricechange.toFixed(2)}%</p>
            ):(
                <p className="coin-percent green">{pricechange.toFixed(2)}%</p>
            )
        }
        <p className="coin-marketcap">
            Mkt Cap: Rs.{marketcap.toLocaleString()}
        </p>
        </div>

在我的例子中，使用?来检查字段是否有值

<div className="coin-data">
            <p className="coin-price">Rs.{price}</p>
             <p className="coin-volume">Rs.{volume?.toLocaleString()}</p>
            {pricechange<0 ? (
                <p className="coin-percent red">{pricechange.toFixed(2)}%</p>
            ):(
                <p className="coin-percent green">{pricechange.toFixed(2)}%</p>
            )
        }
        <p className="coin-marketcap">
            Mkt Cap: Rs.{marketcap?.toLocaleString()}
        </p>
        </div>

好吧，我想我疯了，我真的在做同样的React过程，在完全相同的步骤，我想弄清楚我做错了什么？我加的？但现在日期显示不出来
好的，如果你继续前进，他纠正了这个问题，在ExpenseItem.js文件的返回中，你需要添加以下内容：

<ExpenseDate date={props.date} />

在你的子组件中，你需要添加一个prop来获取'date'的值。这样它就不会返回undefined的'date'。检查下面的示例。在ExpenseItem.js中添加

<ExpenseDate date={props.date} />

检查您是否忘记传递数据。
在ExpenseForm.js中，提交函数保存NewList，

props.onSaveExpenseData(expenseData).

通过expensieData至关重要。

你可能已经找到了解决办法，但我也在做同样的课程，我被困在同一部分
我注意到的是，它与date.toLocaleString无关。
这个错误的发生是因为我们在不同的组件中命名变量的方式，所以请确保所有接受输入的变量都具有相同的名称
在我的例子中，App.js

const dummy = [{ id: "", date : new Date(),title :"Car Gas Fill Up",amount : 24.20,},]

ExpenseItem.js

<Card  className="expense-item">
 
<ExpenseDate date ={props.date} />
  <div className="expense-item__description">
    <h2>{props.title}</h2>

    <div className="expense-item__price">${props.amount}</div>
  
  </div>
</Card>

Expense.js

<Card className="expenses">
    <ExpensesFilter
      defaultYear={filterYear}
      changeYear={filterYearChanger}
    />

    {props.items.map((expense,index) => (
      <ExpenseItem
      key ={index}
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
      
      />
    ))}
  </Card>

所以App.js数组对象中的变量在另一个组件中具有相同的名称，它们将信息传递给子组件

我遵循这个过程并修复了这个问题，你所需要的只是更新date对象，使其位于报价之间

date: new Date("2020, 7, 14")

我在第5章渲染列表时遇到了这个问题，我创建了一个状态的对象，如果没有，请跳过。我和你有同样的问题，但我已经把数据传递给了上层组件。

<ExpenseDate date={props.date} />

然后我在ExpenseForm.js文件中检查我的代码，我在状态中创建了对象

const [userInput, setUserInput] = useState({
    enteredTitle: '',
    enterAmount: '',
    enteredDate: ''
})

然后，我仔细检查我的onSubmit方法，并添加以下代码expenseData，并将其传递给onSaveExpenseData()

const submitHandler = (event) => {
    event.preventDefault();
    const expenseData = {
        title: userInput.enteredTitle,
        amount: userInput.enterAmount,
        date: new Date(userInput.enteredDate)
    }
    props.onSaveExpenseData(expenseData);
    setUserInput({
        enteredTitle: '',
        enterAmount: '',
        enteredDate: ''
    })
}

问题终于解决了。我过去常常直接将userInput传递给onSubmit方法，并造成了很多麻烦。祝你好运！