「不能讀取屬性未定義的‘道具’」響應問題

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

this由於JS的工作原理，map裏面的功能和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> 
     ); 
    } 
});