Question

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

我实际上不知道为什么会出现这个错误。我已经搜索了很多内容，但没有任何解决方案。也许有人可以给我一个提示，错误原因是什么以及如何解决？提前谢谢。

Answer 1

原因是您从this.props.contacts组件传递App。 contacts不是您应用甚至州的属性，它是范围内的标准javascript变量。

这应该有用。

<ContactsList contacts={ contacts } />

显然，如果你将来在App中说明，那么你会相应调整。

错误：未捕获的TypeError：无法读取属性＆＃39; map＆＃39;未定义的

1 个答案: