我正在学习 React,现在对于我的项目,我需要将 Prop 从我的用户组件传递到我的主组件。每次我尝试像 this video 上的人那样做时,我都会犯这个错误:
handleSelectedUser(user){
console.log(this.state);
}
render() {
let users;
let selectElem = this.selectElement;
if (this.state.displayedUsers) {
users = this.state.displayedUsers.map(function (usr) {
return (
<User key={usr.contact.phone} user={usr} someInfo={this.handleSelectedUser.bind(this)}/>
//this one throwing this mistake: "ContactsApp.js:44 Uncaught TypeError: Cannot read property 'handleSelectedUser' of undefined"
);
});
}
return (
<div>
<div className="left-column">
<div className="users">
<SearchUser handleEvent= {this.handleSearch.bind(this)} />
<ul className="usersList"> {users} </ul>
</div>
</div>
<div className="right-column">
<ContactDetail someInfo={this.handleSelectedUser.bind(this)} selectedUser={this.props.items[3]} /> //this element works well
</div>
</div>
);
}
}
User 组件和 ContactDetail 组件具有相同的方法,向其添加 someInfo 属性,但只有 ContactDetail 效果良好。可能是什么问题?
最佳答案
选择学习 React 的绝佳选择,也是您选择的优秀讲师。你的问题不在于 React 逻辑本身,而是你犯了一个 JavaScript 错误,确切地说是一个 ES6 错误。这是您当前的代码:
if (this.state.displayedUsers) {
users = this.state.displayedUsers.map(function (usr) {
return (
<User key={usr.contact.phone} user={usr} someInfo={this.handleSelectedUser.bind(this)}/>
//this one throwing this mistake: "ContactsApp.js:44 Uncaught TypeError: Cannot read property 'handleSelectedUser' of undefined"
);
});
}
现在你可以看到你得到的错误是
Cannot read property 'handleSelectedUser' of undefined"
你怎么调用它?
this.handleSelectedUser.bind(this)
这意味着上面错误中的未定义是this
为什么会发生这种情况?当您映射数组时,通常的做法是使用箭头函数而不是未命名的函数,如下所示:
users = this.state.displayedUsers.map((usr) => {
return (
<User key={usr.contact.phone} user={usr} someInfo={this.handleSelectedUser.bind(this)}/>
//this will now work
);
});
区别在于 () => {可以访问 this},但 function() {不能访问 this}
关于javascript - 将 props 从子组件传递到主组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50401956/