错误：未捕获TypeError：无法读取未定义的属性“地图”

我刚刚从reactjs开始并做了一个教程。本教程似乎并未完全更新。我总是收到此错误信息：错误：未捕获TypeError：无法读取未定义的属性“地图”

Uncaught TypeError: Cannot read property 'map' of undefined 
    at ContactsList.render (ContactsList.js:40) 
    at ReactCompositeComponent.js:796 
    at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795) 
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822) 
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:746) 
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:724) 
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:645) 
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:547) 
    at Object.receiveComponent (ReactReconciler.js:125)

这是我的代码：

import React, { Component } from 'react'; 
import Contact from './Contact'; 

class ContactsList extends Component { 

    constructor() { 
     super(); 
     this.state = { 
      search: '' 
     }; 
    } 

    updateSearch(event) { 
     this.setState({ search: event.target.value.substr(0,20) }) 
    } 

    render() { 
     return (

      <div> 
       <ul> 
       { 
        this.props.contacts.map((contact)=> { 
         return <Contact contact={contact} key={contact.id} /> 
        }) 

       } 
       </ul> 
       <input type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} /> 
      </div> 
     ); 
    } 
} 

export default ContactsList

这ContactList类被称为是这样的：

import React, { Component } from 'react'; 
import ReactDOM, { render } from 'react-dom' 
import ContactsList from './ContactsList'; 

let contacts = [{ 
    id: 3, 
    name: 'Ray', 
    phone: '123 555 5555' 
}, 
{ 
    id: 2, 
    name: 'Jay', 
    phone: '123 123 5555' 
}, 
{ 
    id: 1, 
    name: 'May', 
    phone: '123 123 1234' 
}] 

class App extends Component { 
    render() { 
    console.log('contacts:' + this.props.contacts); 
    return (
     <div> 
     <h1>Contacts List</h1> 
     <ContactsList contacts={this.props.contacts} /> 
     </div> 
    ); 
    } 
} 

export default App; 

ReactDOM.render(<App contacts={contacts} />,document.getElementById('root'));

我居然不知道，为什么会出现这个错误。我已经搜索了很多，但没有任何解决方案。也许有人可以给我一个提示，错误原因是什么以及如何解决它？在此先感谢。

来源

2017-03-23 dns_nx

您如何期待'this.props.contacts'具有价值？ – Pointy

没有联系人作为prop添加到组件。因此不会有它的地图属性。 –

好的，但怎么办？请参阅我的编辑。对不起，我是'react'中的绝对初学者。 –

原因是您从App组件中传入this.props.contacts。 contacts不是您的应用程序的属性，甚至不是状态，它是范围中的标准JavaScript变量。

这应该工作。

<ContactsList contacts={ contacts } />

显然，如果你把它状态App在未来，那么你会进行相应的调整。

来源

2017-03-23 13:47:16 dpwrussell

哦，男人。谢谢你的帮助。来自我的愚蠢的错误。 :-(我总是在'ContactsList'中搜索一个解决方案/错误，因为名字已经显示出来了。无论如何，非常感谢！ –

我不确定你在我之后添加了'App contacts = {contacts}'回答与否，但是这应该达到与我所建议的相同的效果，也就是说，这会将'contacts'作为一个属性提供给App，这将使'App'呈现可以执行'this.props.contacts'。 – dpwrussell

错误：未捕获TypeError：无法读取未定义的属性“地图”

回答

相关问题