“未捕获类型错误：props.expenses.map 不是函数”使用 useState 钩子设置状态时

Question

我正在使用Reactate进行演示。当我尝试在费用组件中打印费用数据时，我面临以下错误。如果我在没有USESTATE的情况下传递数据，但是如果我使用Usestate，则无法正常工作。

错误

Uncaught TypeError: props.expenses.map is not a function
    at Expenses (Expenses.js:18:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateFunctionComponent (react-dom.development.js:17356:1)
    at beginWork (react-dom.development.js:19063:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

我的代码

import { useState } from "react";
import "./App.css";
import Expenses from "./components/Expenses/Expenses";
import NewExpense from "./components/NewExpense/NewExpense";

const DUMMY_DATA = [
  {
    id: "ex1",
    title: "expense item 1",
    amount: 120,
    date: new Date(2022, 2, 22),
  },
  {
    id: "ex2",
    title: "expense item 2",
    amount: 100,
    date: new Date(2022, 2, 23),
  },
  {
    id: "ex3",
    title: "expense item 3",
    amount: 90,
    date: new Date(2022, 2, 20),
  }
];

function App() {
  const [expenses, setExpenses] = useState(DUMMY_DATA);

  const onAddExpenseHandler = (expense) => {
    setExpenses((prevExpenses) => {
      return { expense, ...prevExpenses };
    });
  };

  return (
    <div className="App">
      <NewExpense onAddExpense={onAddExpenseHandler} />
      <Expenses expenses={expenses} />
    </div>
  );
}

export default App;

Answer 1

问题是状态的返回类型。我是返回对象而不是数组。我设置了一些虚拟费用数据，即数组类型。因此，返回数组而不是对象解决了我的问题。当我通过对象时，它无法通过数组循环，并且给出了错误。

setExpenses((prevExpenses) => {
   return { expense, ...prevExpenses }; //Problem here
});

解决方案：

setExpenses((prevExpenses) => {
   return [expense, ...prevExpenses]; //use array over here
});