“无法读取未定义的属性‘props’” React 问题
2016-12-06
4958
我正在根据 本教程 在 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>
);
}
});
这是 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”以及我在教程中提到的绑定的作用。
2个回答
map
函数内的
this
与函数外部的
this
不同,这是由于 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>
);
}
无关,但我会将该
map
函数移到其自己的函数中并避免深度嵌套。
Dave Newton
2016-12-06
Dave Newton 的回答 完全正确,但我只想补充一点,如果您使用 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>
);
}
});
Alex Young
2016-12-06