我刚刚开始使用 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

此 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'));

我其实不知道，为什么会出现此错误。我已经在 Google 上搜索了很多，但都没有找到解决方案。也许有人可以给我提示，错误原因是什么以及如何解决？ 提前致谢。