开发者问题收集

TypeError:无法读取未定义的属性“id”(REACTJS)

2018-03-15
435

我对 Reactjs 还不熟悉,我想我已经尽力了,但还是无法解决这个错误 TypeError:无法读取未定义的属性‘id’ 请帮忙,下面是我的代码。

if(this.props.controller === 'location'){  

   eventData = Object.keys(this.props.heda).map( evKey => {

        return Object.keys(evKey).map( post => {

            return [...Array(this.props.heda[evKey][post])].map( lol => {

                    return  <Event key= {lol['id']}          
                    descriptions = {lol['description']}
                    headings = {lol['title']}
                    id = {lol['id']} 
                    clicked = { ()=> this.viewSelectedEvent(lol['id']) }/>;

            }) ; 

        });

    });

}

错误完整堆栈跟踪:

在此处输入图像描述

这是我试图循环的来自 flask 的数据。我试图将每个对象转换为一个数组,然后循环遍历该数组。我也尝试了 console.log(lol),得到了如下图所示的数据 data is available

 events = [
        {
          'id': 1,
          'title': u'HHGHHMjshjskksjks',
          'description': u'Cras justo odio dapibus ac facilisis in egestas eget qua ', 
          'location':'jkknxjnj',
          'category':'party',
          'rsvp': False,
          'event_owner':1
        },

        {
          'id': 2,
          'title': u'khjhjshjsjhdndjdh',
          'description': u'jhhnbsbnsbj', 
          'location':'jhjhsjhjhsjhjdhsd',
          'category':'party',
          'rsvp': False,
          'event_owner':2
        },

        {
          'id': 3,
          'title': u'jhjshjsdhjshdjshjsd',
          'description': u'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec  elit non mi porta gravida at eget metus.', 
          'location':'kjkshjhjhjbsnbsd',
          'category':'party',
          'rsvp': False,
          'event_owner':2
        },

        {
          'id': 4,
          'title': u'jjhjshjhsjhjshjjhjhd',
          'description': u'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec  elit non mi porta gravida at eget metus.', 
          'location':'kjisisiisdsds',
          'category':'party',
          'rsvp': False,
          'event_owner':2
          },

          {
            'id': 5,
            'title': u'uiujsdshuuihuyksjhjs',
            'description': u'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec  elit non mi porta gravida at eget metus.', 
            'location':'sjnsisuis',
            'category':'party',
            'rsvp': False,
            'event_owner':2
          },

          {
          'id': 6,
          'title': u'iusijksuiksuhj suyuys jhu ',
          'description': u'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec  elit non mi porta gravida at eget metus.', 
          'location':'isuisiiws',
          'category':'party',
          'rsvp': False,
          'event_owner':2
          },

          {
          'id': 7,
          'title': u'jujusi jsuoios jshuysd',
          'description': u'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec  elit non mi porta gravida at eget metus.', 
          'location':'area h',
          'category':'party',
          'rsvp': False,
          'event_owner':2
          },
    ]
3个回答

使用 [...Array(this.props.heda[evKey][post])] 创建一个数组,该数组的第一个元素为 this.props.heda[evKey][post])

也许您想说 [...this.props.heda[evKey][post]] 来创建该数组的克隆?

Jason Athanasoglou
2018-03-15

因为他无法在 this.props.heda[evKey][post] 对象中找到 id。因此,首先您应该控制 this.props.heda[evKey][post] 对象,然后我认为您会找到实际问题。

Pinki Gupta
2018-03-15

请尝试以下代码片段:

this.props.heda.map((evVal, evKey) => {
    return evVal.map((postVal, postKey) => {
        ...
    }
}

现在 this.props.heda[evKey][postKey] 将为您提供预期的对象。

Rushikesh Bharad
2018-03-15