[英]Getting " Uncaught TypeError: Cannot read properties of undefined (reading 'Items')"
I am having this error "Expenses.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'Items')" on a react project I am working on and I am not sure why I keep getting it.在我正在处理的 React 项目中,我遇到了这个错误“Expenses.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'Items')”,我不确定为什么我一直得到它。 I am completely new to REACT.我对 REACT 完全陌生。 Any help is really appreciated非常感谢任何帮助
Here's my code for the files这是我的文件代码
App.js应用程序.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费用.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();
To resolve the error you should change export default Expenses();
要解决该错误,您应该更改export default Expenses();
to export default Expenses;
export default Expenses;
You also should refactor your code in this way您还应该以这种方式重构您的代码
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;
Never mind.没关系。 I found the answer.我找到了答案。
After I compare App.js and Expenses.js, I found that I wrote export default wrong for Expenses.js (It should be just export default Expenses;)我对比了App.js和Expenses.js之后,发现我写的Expenses.js的export default写错了(应该只是export default Expenses;)
This is resolved这个解决了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.