状态未更新

Question

我是 React 的菜鸟，我正在了解状态以及如何使用它。我在练习时注意到，当我执行下一个代码时，状态没有更新。

import ExpensesItems from "./components/Expenses/Expenses";
import NewExpense from "./components/NewExpense/NewExpense";
import { useState } from "react";
let DUMMY_EXPENSES = [
  {
    date: new Date(2021, 6, 15),
    description: "Zapatos",
    price: "1500",
  },
];
function App() {
  const [expense, setExpenses] = useState(DUMMY_EXPENSES);
  const onNewExpenseHandler = (expense) => {
    DUMMY_EXPENSES.push(expense);
    setExpenses(DUMMY_EXPENSES);
  };
  return (
    <div>
      <NewExpense onNewExpense={onNewExpenseHandler} />
      <ExpensesItems expenses={expense} />
    </div>
  );
}
export default App;

但是，当我改变状态时，就像使用扩展运算符更新状态一样：

  import NewExpense from "./components/NewExpense/NewExpense";
  import { useState } from "react";
  let DUMMY_EXPENSES = [
    {
      date: new Date(2021, 6, 15),
      description: "Zapatos",
      price: "1500",
    },
  ];
  function App() {
    console.log("RE EXECUTED");
    const [expense, setExpenses] = useState(DUMMY_EXPENSES);

    const onNewExpenseHandler = (expense) => {
      DUMMY_EXPENSES.push(expense);
      setExpenses([...DUMMY_EXPENSES]);
    };
    return (
      <div>
        <NewExpense onNewExpense={onNewExpenseHandler} />
        <ExpensesItems expenses={expense} />
      </div>
    );
  }
  export default App;

虽然它有效，但我想知道我之前的代码没有的原因。有人知道吗？