Question

我正在学习反应，现在我的项目需要从我的用户组件传递道具到我的主要组件。每当我尝试像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>
      );
  }
}

用户组件和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)

这意味着上述错误中未定义为此

为什么会这样？当您通过数组进行映射时，使用箭头函数而不是未命名的函数是一种常见的做法，如下所示：

users = this.state.displayedUsers.map((usr) => {
return (
  <User  key={usr.contact.phone} user={usr} someInfo={this.handleSelectedUser.bind(this)}/>
      //this will now work
    );
});

区别在于（）=＆gt; {有权访问此}，但是function（）{dosent可以访问此}

Answer 2

在地图功能中使用=>代替function，如下所示

users = this.state.displayedUsers.map(usr => {
        return (
          <User  key={usr.contact.phone} user={usr} someInfo={this.handleSelectedUser.bind(this)}/>
        );
      });

但为什么呢？简而言之，this关键字指的是您在地图功能中创建的匿名函数。虽然=>符号使得范围变得透明，但this的行为与您期望的一样。

我知道这并不能解释整个情况，但希望它提供足够的洞察力来处理这个解决方案。您可能需要考虑对此主题进行更多研究。

另一个解决方案可能是将this临时变量分配给var self = this;，然后再使用self。

P.S。您添加到函数中的.bind（）也是解决此问题的另一种方法，但是，它需要一些额外的重构。

将道具从子组件传递到主组件

2 个答案: