“不能读取属性未定义的‘道具’”响应问题

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> 
     ); 
    } 
});