开发者问题收集

× 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