TypeError:传入属性时无法读取属性

Question

我遇到了一个问题

TypeError:无法读取我的Timeline.js文件中未定义的属性'year‘

当我将一个prop传递给react组件并希望从我的prop中获取一个特定变量时。更确切地说，timelineyears.js是一个数据数组，它有一个我想要传递给TimelineItem.js的年份变量。最后，Timeline.js将遍历所有的TimelineItem以显示年份，但我得到了一个TypeError: Cannot read属性'year‘在我编译时未定义。任何帮助都将不胜感激！

这是我的timelineYears.js文件

​

const timelineYears = [{
        year: 1925

    },{
        year: 1926
    },
    {
        year: 1927
    }

];

export default timelineYears;

​

这是我的timelineItem.js文件

​

import React from 'react';
import './timelineYears.js';


const TimelineItem = ({timelineYears}) => (
    <div className="timeline-item">
        <div className="timeline-item-content">
           {timelineYears.year}
        </div>   

    </div>

);

export default TimelineItem;

​

最后，这是我的Timeline.js文件

​

import React from 'react';
import timelineYears from  './timelineYears.js';
import TimelineItem from './TimelineItem.js';


const Timeline = () => timelineYears.length > 0 && (
    <div className="timeline-container">
        {timelineYears.map((data, idx) => (
            <TimelineItem data = {data} key={idx} />
        ))}
    </div>
);

export default Timeline;

​

Answer 1

我认为问题出在您的TimelineItem组件中。根据您的代码，您需要一个名为timelineYears的属性，但是，您传递的是一个名为data的属性。

这应该是可行的：

import React from 'react';
import './timelineYears.js';


const TimelineItem = ({data}) => (
    <div className="timeline-item">
        <div className="timeline-item-content">
           {data.year}
        </div>   
    </div>
);

export default TimelineItem;

Answer 2

您的属性在Timeline.js中称为data。因此，当您在TimelineItem中解构时，它也应该被称为data，而不是timelineYears

因此，在TimelineItem中去掉所有称为timelineYears的东西，并将其替换为数据

import React from 'react';


const TimelineItem = ({data}) => (
    <div className="timeline-item">
        <div className="timeline-item-content">
           {data.year}
        </div>   

    </div>

);

export default TimelineItem;