"未定義のプロパティ '小道具を読むことができません"問題の反応

Question

this tutorial. に基づいて、リアクトでアプリを構築しています。古いes2016を使用する代わりに、私は古い問題を抱えています来る挑戦私はブラウザでこのエラーを受け取りました： "TypeError：不定のプロパティ '小道具'を読むことができません。私はそれが{this.props.onDelete}部分を指していると仮定します。ここでNotes.jsxコンポーネントの私のコードの抜粋です：

var Notes = React.createClass({ 
render: function() { 

return (
    <ul> 
    {this.props.notes.map(
     function(note) { 
     return (
      <li key={note.id}> 
      <Note 
       onTheDelete={this.props.onDelete} 
       task={note.task} /> 
      </li> 
     ); 
     } 
    )} 
    </ul> 
); 
} 
}); 

そして、ここではApp.jsxからの抜粋ですが、それは親の：

var App = React.createClass({ 
    getInitialState: function() { 
    return { 
     notes: [ 
     { 
      id: uuid.v4(), 
      task: 'Learn React' 
     }, 
     { 
      id: uuid.v4(), 
      task: 'Do laundry' 
     } 
     ] 
    } 
    }, 

    newNote: function() { 
    this.setState({ 
     notes: this.state.notes.concat([{ 
     id: uuid.v4(), 
     task: 'New task' 
     }]) 
    }); 
    }, 

    deleteNote: function() { 
    return 'hi'; 
    }, 

    render: function() { 
    var {notes} = this.state; 

    return (
     <div> 
     <button onClick={this.newNote}>+</button> 
     <Notes notes={notes} onDelete={this.deleteNote}/> 
     </div> 
    ); 
    } 
}); 

私が確認するためにdeleteNoteから実際に有益な部分を削除しましたそこに問題はなかった。私は "this"を使用して頭を包むのに苦労し、私が言及したチュートリアルでバインドが何をしているのか分かりません。

Answer 1

thismapの機能は、JSの仕組みのためにthisと同じではありません。

あなたはthis.props.onDeleteをオフに保存し、W/O小道具が参照それを使用することができます：

render: function() { 
    var onDelete = this.props.onDelete; 

    return (
    <ul> 
     {this.props.notes.map(
     function(note) { 
      return (
      <li key={note.id}> 
       <Note 
       onTheDelete={onDelete} 
       task={note.task} 
       /> 
      </li> 
     ); 
     } 
    )} 
    </ul> 
); 
} 

無関係が、私は、独自の機能にそのmap機能を移動し、深いネストを避けるだろう。

Answer 2

Dave Newton's answerが完全に正しいですが、ES6の矢印機能を使用する場合は、これを追加する必要がなくなり、return文を削除して暗黙のリターン構文。

var Notes = React.createClass({ 
    render: function() { 
     return (
      <ul> 
      {this.props.notes.map(
       note => {(
        <li key={note.id}> 
        <Note 
         onTheDelete={this.props.onDelete} 
         task={note.task} /> 
        </li> 
       )} 
      )} 
      </ul> 
     ); 
    } 
});