ReactJs 앱에서 this.state.data를 인식하지 못합니다.

Question

간단한 Todo 앱을 빌드하려고하지만 오류가 발생합니다 : 누군가가 오류를 식별하는 데 도움이 될 수 있습니까 ??

오류

app.min.js:9 Uncaught TypeError: Cannot read property 'data' of undefined at Object.value [as addNewContact] (http://localhost:8888/dist/assets/js/app.min.js:9:18059) at b.value (http://localhost:8888/dist/assets/js/app.min.js:9:19043) at Object.f.invokeGuardedCallback (http://localhost:8888/dist/assets/js/app.min.js:3:5790) at g (http://localhost:8888/dist/assets/js/app.min.js:3:3021) at Object.h [as executeDispatchesInOrder] (http://localhost:8888/dist/assets/js/app.min.js:3:3241) at l (http://localhost:8888/dist/assets/js/app.min.js:2:30755) at n (http://localhost:8888/dist/assets/js/app.min.js:2:30881) at Array.forEach (native) at c (http://localhost:8888/dist/assets/js/app.min.js:3:6210) at Object.processEventQueue (http://localhost:8888/dist/assets/js/app.min.js:2:31947

코드 : 사전에

import React from 'react'; 
import ReactDOM from 'react-dom'; 


export class ContactsListApp extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      data: this.props.data 
     } 
    } 
    addContact(newContactObj) { 
     console.log(newContactObj); 
     var tmpStateData = this.state.data; 
     tmpStateData.push(newContactObj.value); 

     this.setState({ 
      data: tmpStateData 
     }); 
    } 
    render() { 
     return (
      <div className="contact-list"> 
       <div className="container"> 
        <div className="row"> 
         <div className="col-xs-12 col-sm-12 col-md-12"> 
          <AddContactPanel addNewContact={this.addContact} /> 
          <ContactList contacts={this.state.data} /> 
         </div> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
} 

class ContactList extends React.Component { 
    render() { 
     var items = Array.prototype.map.call(this.props.contacts, function (contact, index) { 
      return <ContactItem name={contact.name} key={index} /> 
     }); 

     return (
      <ul>{items}</ul> 
     ) 
    } 
} 

class AddContactPanel extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    handleAddContact() { 
     var contactItem = this.refs.newContactName; 
     this.props.addNewContact({ 
      "_id": (Math.random(1000 * 10) + 1), 
      "name": this.refs.newContactName.value, 
      "occupation": "myJob", 
      "email": "me@hotmail.com", 
      "telephone": "" 
     }); 
    } 
    render() { 
     return (
      <div className="row"> 
       <form> 
        <input required ref="newContactName" type="text" name="newContactName" /> 
        <input type="submit" name="submit" onClick={this.handleAddContact.bind(this)} /> 
       </form> 
      </div> 
     ) 
    } 
} 


class ContactItem extends React.Component { 
    render() { 
     return (
      <li>{this.props.name}</li> 
     ) 
    } 
} 


module.exports = { 
    contactListApp: ContactsListApp 
} 

감사합니다!

Answer 1

첫 번째로을 바인딩해야하는 기능에 상태를 사용 가능하게 만들기 위해. 당신은이 목적을

addContact(newContactObj) { 
     console.log(newContactObj); 
     var tmpStateData = this.state.data; 
     tmpStateData.push(newContactObj.value); 

     this.setState({ 
      data: tmpStateData 
     }); 
    } 

둘째를 위해 지방 화살표 기능을 사용할 수있다 : react docs 제안하고 당신이이 방법을 사용하지 말아야으로 초기 상태로 소품을 설정하는 것은 안티 패턴이다. 대신 당신은`addContact`에 대한 this``

constructor(props) { 
    super(props); 
    this.state = { 
     data: '' 
    } 
} 
componentDidMount() { 
    this.setState({data: this.props.data}) 
} 
addContact = (newContactObj) => { 
    console.log(newContactObj); 
    var tmpStateData = this.state.data; 
    tmpStateData.push(newContactObj.value); 

    this.setState({ 
     data: tmpStateData 
    }); 
}