状態はマップの範囲内では定義されていません

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