상태가지도 범위에서 정의되지 않았습니다.

Question

저는 reactjs를 처음 사용하고 개념을 배우려고합니다. 내가 reactjs에 데모 스티커 메모 응용 프로그램을 만드는거야. 오류가 발생했습니다

index.js: Uncaught TypeError: Cannot read property 'notes' of undefined

다음과 같이 보드 구성 요소와 메모 구성 요소가 있습니다.

주 구성 요소 :

import React from 'react'; 
import ReactDOM from 'react-dom'; 
class Note extends React.Component { 
    constructor() { 
    super(); 
    this.state = {editing: false} 
    this.edit = this.edit.bind(this); 
    this.save = this.save.bind(this); 
    } 

    edit() { 
    this.setState({editing: true}); 
    } 

    save() { 
    this.props.onChange(ReactDOM.findDOMNode(this).value, this.props.index); 
    this.setState({editing: false}); 
    } 

    remove() { 
    this.props.onRemove(this.props.index); 
    } 

    renderDisplay() { 
    return (
     <div className='note'> 
     <p>{this.props.children}</p> 
     <span> 
     <button onClick={this.edit} className='btn btn-primary glyphicon glyphicon-pencil'/> 
     <button onClick={this.remove} className='btn btn-danger glyphicon glyphicon-trash'/> 
     </span> 
    </div> 
    ); 
    } 

    renderForm() { 
    return (
     <div className='note'> 
     <textarea className='form-control' defaultValue={this.props.children} ref='newText'></textarea> 
      <button className='btn btn-success btn-sm glyphicon glyphicon-floppy-disk' onClick={this.save} /> 
     </div> 
    ); 
    } 

    render() { 
    if(this.state.editing) { 
     return this.renderForm(); 
    } else { 
     return this.renderDisplay(); 
    } 
    } 
} 

export default Note; 

그리고 보드 구성 요소 :

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Note from './Note'; 

class Board extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     notes: [ 
     'Check emails', 
     'Log in to jira', 
     'Fix the issues', 
     'Logout the system' 
     ] 
    } 
    } 

    update(newText, i) { 
    console.log(this); 
    console.log(this.state); 
    var arr = this.state.notes; 
    arr[i] = newText; 
    this.setState({notes: arr}); 
    } 

    remove(i) { 
    var arr = this.state.notes; 
    arr.splice(i, 1); 
    this.setState({notes: arr}); 
    } 

    eachNote(note, i) { 
    return (
     <Note key={i} 
      index={i} 
      onChange={this.update} 
      onRemove={this.remove} 
     >{note}</Note> 
    ); 
    } 

    render() { 
    return (
     <div className='board'> 
     {this.state.notes.map(this.eachNote, this)} 
     </div> 
    ); 
    } 
} 


ReactDOM.render(<Board></Board>, document.getElementById('react-container')); 
export default Board; 

내가 메모를 업데이트하려고하면 메모가 상태가 변수 노트와 내가 가지고 사용하여 렌더링 나는이 오류가 무엇입니까 onChange : {this.update}와 같이 각 노트에 속성을 첨부했습니다. 업데이트에서는 상태 변수 노트에 액세스하지만 상태는 정의되지 않습니다.

누구든지 나에게 그것에 대해 제안 할 수 있습니까? 감사합니다

Answer 1

시도 대신의

onChange={this.update.bind(this)} 

: 그들은 단지 모든 인스턴스에 대해 한 번 바인드 있도록 더 나은 성능을 위해

onChange={this.update} 

Answer 2

는 생성자에서 이벤트 처리기를 바인딩하는 것이 좋습니다 반응한다. 자세히 알아보기 : https://facebook.github.io/react/docs/reusable-components.html#no-autobinding