Javascript 错误：未捕获类型错误：无法读取属性'；地图'；未定义的

我只是从

reactjs

开始做一个教程。 本教程似乎不是完全最新的。 我总是收到以下错误消息：

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

我真的不知道，为什么会出现这个错误。我已经在谷歌上搜索了很多，但没有找到解决方案。也许有人可以给我一个提示，错误的原因是什么以及如何解决它？

---

提前感谢。

原因是您正在从您的

应用程序组件中传递
此.props.contacts
contacts
不是应用程序的属性，甚至不是状态，而是作用域中的标准javascript变量

这应该行得通

<ContactsList contacts={ contacts } />



显然，如果将来在
App
中对其进行状态设置，则会相应地进行调整。
您希望
此.props.contacts
如何具有值？没有联系人作为道具添加到组件中。所以它就不会有map属性了。好吧，但是怎么办呢？请看我的编辑。对不起，我是
react
的绝对初学者。哦，伙计。谢谢你的帮助。我犯了愚蠢的错误-（我一直在
contacts列表中搜索解决方案/错误，因为名称已显示。无论如何。非常感谢！我不确定您是否添加了
App contacts={contacts}
在我的回答之后，或者不回答之后，但这应该实现与我建议的相同的效果。即，这将作为属性将
联系人
馈送到应用程序中，这将使
应用程序
渲染中可以执行
此.props.contacts
。
<ContactsList contacts={ contacts } />