反应课程。当您在表单中输入时，它不会更新组件。它只是在旧标题上添加数量和日期

Question

反应课程。当您在表单中输入时，它不会更新组件。它只是在旧标题上添加数量和日期。第一个组件 ToiletPaper 接收新输入的数量和日期，旧的数量和日期进入下面的组件。标题根本不更新。谢谢 反应课程。当您在表单中输入时，它不会更新组件。它只是在旧标题上添加数量和日期。第一个组件 ToiletPaper 接收新输入的数量和日期，旧的数量和日期进入下面的组件。标题根本不更新。谢谢 反应课程。当您在表单中输入时，它不会更新组件。它只是在旧标题上添加数量和日期。第一个组件 ToiletPaper 接收新输入的数量和日期，旧的数量和日期进入下面的组件。标题根本不更新。谢谢

import React, {useState} from 'react';
import Expenses from './component/Expenses/Expenses';
import NewExpense from './component/NewExpense/NewExpense';



  const DUMMY_EXPENSES = [
    {
      id: 'e1',
      title: 'Toilet Paper',
      amount: 94.12,
      date: new Date(2020, 7, 14),
    },
    { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
    {
      id: 'e3',
      title: 'Car Insurance',
      amount: 294.67,
      date: new Date(2021, 2, 28),
    },
    {
      id: 'e4',
      title: 'New Desk (Wooden)',
      amount: 450,
      date: new Date(2021, 5, 12),
    },
  ];
function App(){

  const[expenses,setExpenses] = useState(DUMMY_EXPENSES);
  
  const addExpenseHandler = (expense) => {
    setExpenses((prevExpenses) => {
      return [expense, ...prevExpenses];
    });
    };

    
  return (
    <div>
<NewExpense onAddExpense={addExpenseHandler}/>    
     <Expenses items={expenses}></Expenses>

    </div>
  );
};

export default App;

import React, {useState} from 'react';
import './Expenses.css';
import ExpenseItem from './ExpenseItem';
import Card from '../UI/Card';
import ExpensesFilter from './ExpensesFilter';


function Expenses(props){

    const [filteredYear, setFilteredYear] = useState('2020');

    function filterChangeHandler(selectedYear){

        setFilteredYear(selectedYear);
    


    }
return (

    <div>

        
<Card className='expenses'>
<ExpensesFilter selected= {filteredYear} onChangeFilter={filterChangeHandler}
   />
   {props.items.map((expense => (
   <ExpenseItem 
   title={expense.title} 
   amount={expense.amount} 
   date={expense.date}
   />)))}

</Card>
</div>
);
}

export default Expenses;