你在ExpenseItem中调用props了吗（我猜）？试着在div之间这样做。

<ExpenseDate date={props.date} />

当我开始在ExpenseItem和ExpensDate之间拆分组件时，我正在学习相同的课程并遇到了相同的问题。
你需要做的是：

• 在expenses数组中，将date值设为新日期
  
  的字符串

• 然后，将该日期字符串作为正确
  
  向下传递到ExpenseDate组件

• 最后，使用ExpenseDate组件中日期字符串在每次呈现ExpenseDate组件时显示一个新日期。
  

• 这是在每个ExpensDate组件
  
  中呈现不同日期时的外观

我希望这对你或者下一个在学习这门课时遇到这个问题的人有帮助。

我用这种方法解决了这个问题，将状态添加到一个对象中，而不更改日期

ExpenseFrom.js代码如下：

import "./ExpenseForm.css";
import { useState } from "react";

const ExpenseForm = (props) => {
  // const [enteredTitle, setEnteredTitle] = useState("");
  // const [enteredAmount, setEnteredAmount] = useState("");
  // const [enteredDate, setEnteredDate] = useState("");

  const [userInput, setUserInput] = useState({
    title: "",
    amount: "",
    date: "",
  });

  const TitleChangeHandler = (event) => {
    // setEnteredTitle(event.target.value);
    setUserInput((prevState) => {
      return {
        ...prevState,
        title: event.target.value
      };
    });
  };

  const AmountChangeHandler = (event) => {
    // setEnteredAmount(event.target.value);
    setUserInput((prevState) => {
      return {
        ...prevState,
        amount: +event.target.value,
      };
    });
  };

  const DateChangeHandler = (event) => {
    // setEnteredDate(event.target.value);
    setUserInput((prevState) => {
      return {
        ...prevState,
        date: new Date(event.target.value),
      };
    });
  };

  const FormHandler = (event) => {
    event.preventDefault();
    const FormData = userInput;
    props.onSaveExpenseData(FormData);
    //  props.onSaveExpenseData(event.userInput);

    // setEnteredTitle("");
    // setEnteredAmount("");
    // setEnteredDate("");

    setUserInput({});
  };

  return (
    <form onSubmit={FormHandler}>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input type="text" onChange={TitleChangeHandler} />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input
            type="number"
            min="0.01"
            step="0.01"
            onChange={AmountChangeHandler}
          />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input
            type="date"
            min="2019-01-01"
            max="2023-01-01"
            onChange={DateChangeHandler}
          />
        </div>
        <div className="new-expense__action">
          <button type="button" onClick={props.onCancel}>
            Cancel
          </button>
          <button type="submit">Add Expense</button>
        </div>
      </div>
    </form>
  );
};

export default ExpenseForm;

ExpenseDate.js代码如下：

import "./ExpenseDate.css";

function ExpenseDate(props) {
    // const month = props.date?.toLocaleString("en-US", { month: "long" });
    // const day = props.date?.toLocaleString("en-US", { day: "2-digit" });
    // const year = props.date?.getFullYear();

    const month = props.date.toLocaleString("en-us", { month: "long" });
    const day = props.date.toLocaleString("en-us", { day: "2-digit" });
    const year = props.date.getFullYear();

    return (
        <div className="expense-date">
        <div className="expense-date__month">{month}</div>
        <div className="expense-date__year">{year}</div>
        <div className="expense-date__day">{day}</div>
      </div>
    );
}

export default ExpenseDate;

我觉得这个可能行得通，不需要改日期，问题出在传递 prop 上。

我在React课程中遇到了同样的问题。我只是用另一个时区替换了美国时区，这对我很有效。