Javascript &引用；无法读取属性'；道具'；“未定义”的定义；反应问题

我正在基于React构建一个应用程序 我使用的不是更新的es2016，而是使用了一种更老的方法，因此我在应对即将到来的挑战方面遇到了一些困难。我在浏览器中遇到这个错误：“TypeError:无法读取未定义的属性'props'。我想它指向{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>
);
}
});

var Notes=React.createClass({
渲染：函数（）{
返回(

{this.props.notes.map(
功能（注）{
返回(


);
}
)}

);
}
});

下面是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>
    );
  }
});

var-App=React.createClass({
getInitialState:函数（）{
返回{
注:[
{
id:uuid.v4（），
任务：“学习反应”
},
{
id:uuid.v4（），
任务：“洗衣服”
}
]
}
},
新注释：函数（）{
这是我的国家({
备注：this.state.notes.concat([{
id:uuid.v4（），
任务：“新任务”
}])
});
},
deleteNote:function（）{
返回“hi”；
},
渲染：函数（）{
var{notes}=this.state；
返回(
+
);
}
});

---

我从deleteNote中删除了实际有用的部分，以确保没有问题。我很难用“this”和我提到的教程中的绑定做什么来概括我的想法。

map

函数内部的这个与它外部的这个不一样，因为JS是如何工作的

您可以保存

this.props.onDelete

并在不使用props引用的情况下使用它：

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

render:function（）{
var onDelete=this.props.onDelete；
返回(

{this.props.notes.map(
功能（注）{
返回(


);
}
)}

);
}

---

不相关，但我会将

map

函数移到它自己的函数中，并避免深度嵌套。

由于JS的工作方式，
map
函数内部的这个

与它外部的这个不同

您可以保存

this.props.onDelete

并在不使用props引用的情况下使用它：

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

render:function（）{
var onDelete=this.props.onDelete；
返回(

{this.props.notes.map(
功能（注）{
返回(


);
}
)}

);
}

不相关，但我会将

map

函数移到它自己的函数中，并避免深度嵌套。

完全正确，但我只想补充一点，如果使用ES6 arrow函数，则可以避免保留对该函数的额外引用，以及删除return语句和利用隐式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>
        );
    }
});

var Notes=React.createClass({
渲染：函数（）{
返回(

{this.props.notes.map(
注=>{(


)}
)}

);
}
});

是完全正确的，但我只想补充一点，如果使用ES6 arrow函数，则可以避免保留对它的额外引用，以及删除return语句和利用隐式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>
        );
    }
});

var Notes=React.createClass({
渲染：函数（）{
返回(

{this.props.notes.map(
注=>{(


)}
)}

);
}
});

这很有道理！我想知道这是否就是问题所在。谢谢这是有道理的！我想知道这是否就是问题所在。谢谢谢谢我喜欢这个主意。我想现在我正试图以我自己的方式从我的旧教诲中重写它，这样我就可以学习了，但我会在以后研究的，谢谢！我喜欢这个主意。我想现在我正试图以我自己的方式从我的旧教诲中重写它，以便我可以学习，但稍后将对此进行研究