获取" Uncaught TypeError: Cannot read properties of undefined (reading 'Items')"

Question

我遇到了这个错误"Expenses.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'Items')"我正在做一个react项目，我不知道为什么我一直得到它。我是REACT的新手。非常感谢您的帮助

这是我的代码文件

App.js

import Expenses from "./components/Expenses";
function App() {
const 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),
},
];
return (
<div>
<h2>Let's get started!</h2>
<Expenses Items={expenses} />
</div>
);
}
export default App;

Expense.js

import ExpenseItem from "./ExpenseItem";
import "./Expenses.css";
function Expenses(props) {
return (
<div className="expenses">
<ExpenseItem
title={props.Items[0].title}
amount={props.Items[0].amount}
date={props.Items[0].date}
/>
<ExpenseItem
title={props.Items[1].title}
amount={props.Items[1].amount}
date={props.Items[1].date}
/>
<ExpenseItem
title={props.Items[2].title}
amount={props.Items[2].amount}
date={props.Items[2].date}
/>
<ExpenseItem
title={props.Items[3].title}
amount={props.Items[3].amount}
date={props.Items[3].date}
/>
</div>
);
}
export default Expenses();

Answer 1

要解决这个错误，您应该更改export default Expenses();到export default Expenses;

你也应该这样重构你的代码

import ExpenseItem from "./ExpenseItem";
import "./Expenses.css";
function Expenses(props) {
return (
<div className="expenses">
{props.Items.map((item, i) => <ExpenseItem
key={i}
title={item.title}
amount={item.amount}
date={item.date}
/>)}
</div>
);
}
export default Expenses;

Answer 2

没关系。我找到了答案。

在我比较了App.js和Expenses.js之后，我发现我把exports default写错了Expenses.js(应该是export default Expenses;)

解析