× TypeError:无法读取未定义的属性“0”- REACT.JS
2021-07-21
112
我在正在进行的 React 项目上遇到了此错误
TypeError:无法读取未定义的属性“0”
,我不确定为什么我一直收到此错误。我对 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;
和有问题的文件
Expenses.js
import ExpenseItem from "./ExpenseItem";
import Card from "./Card";
import "./Expenses.css";
function Expenses(props) {
return (
<Card className = "expenses">
<ExpenseItem
title={props.items[0].title}
amount={props.items[0].amount}
date={props.items[0].date}
></ExpenseItem>
<ExpenseItem
title={props.items[1].title}
amount={props.items[1].amount}
date={props.items[1].date}></ExpenseItem>
<ExpenseItem
title={props.items[2].title}
amount={props.items[2].amount}
date={props.items[2].date}></ExpenseItem>
<ExpenseItem
title={props.items[3].title}
amount={props.items[3].amount}
date={props.items[3].date}></ExpenseItem>
</Card>
);
}
export default Expenses;
我知道错误发生在第 8 行,但我不知道如何修复它。错误的跟踪如下
Expenses
C:/Users/Tinot/Documents/REACT/01-starting-setup/src/components/Expenses.js:8
5 | return (
6 | <Card className = "expenses">
7 | <ExpenseItem
> 8 | title={props.items[0].title}
| ^ 9 | amount={props.items[0].amount}
10 | date={props.items[0].date}
11 | ></ExpenseItem>
1个回答
您的
prop.items
使用了错误的大小写。由于您的 prop 名称是“Items”,因此应该是大写“I”的
props.Items
Bon Macalindong
2021-07-21