javascript - 将 props 从子组件传递到主组件

Question

我正在学习 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 效果良好。可能是什么问题？

Answer 1

选择学习 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}