ReactJS映射函数找不到未定义的属性

ReactJS map function cannot find property of undefined

本文关键字：属性 未定义 找不到 映射函数 ReactJS      更新时间：2023-09-26

我还在学习ReactJS。我正在挑战自己写一个非常基本的待办事项应用程序(就像一个人一样)，我在调用onClick函数时遇到了一个问题。

var List = React.createClass({
  handleClick: function () {
    alert("Clicked!");
  },
  render: function () {
    var list = this.props.items;
    var items = list.map(function(item){
      return (
        <li style={{borderBottom:'1px solid red'}}>
          <label onClick={this.handleClick}>
            <input type="checkbox" />
            {item}
          </label>
        </li>
      );
    });
    return (
      <ul>{items}</ul>
    )
  }
});

这里的问题是onClick={this.handleClick}不能被调用，因为它不在渲染函数的返回调用中。

我需要做什么才能从map函数内部访问handleClick ?

map函数的第二个参数是用于定义的值在执行回调时，this的作用域。:

.map(callback(currentValue, index, array)， value_for_this/scope_to_run_in)

所以你可以修改你的map函数如下:

var items = list.map(function(item){
  return (
    <li style={{borderBottom:'1px solid red'}}>
      <label onClick={this.handleClick}>
        <input type="checkbox" />
        {item}
      </label>
    </li>
  );
}, this);

您也可以使用箭头函数，其中this在其中隐式绑定:

var items = list.map((item) => {
  return (
    <li style={{borderBottom:'1px solid red'}}>
      <label onClick={this.handleClick}>
        <input type="checkbox" />
        {item}
      </label>
    </li>
  );
});

您遇到的问题是，您对list.map的调用将使用与render方法不同的this调用传递的函数。

一个简单的修复方法是在外部作用域中获取this并将其存储在一个变量中，然后在内联函数中使用该变量。

render: function () {
    var self = this;
 // ^^^^^^^^^^^^^^^^
    var list = this.props.items;
    var items = list.map(function(item){
      return (
        <li style={{borderBottom:'1px solid red'}}>
          <label onClick={self.handleClick}>
                       // ^^^^
            <input type="checkbox" />
            {item}
          </label>
        </li>
      );
    });
    return (
      <ul>{items}</ul>
    )
}

您应该显式地将this绑定到handleClick函数，以引用React组件而不是map函数，因此您可以按照以下方式重构代码:

var items = list.map(renderListItem.bind(this));

和添加renderListItem方法在你的React类如下:

renderListItem(item) {
  return (
    <li style={{borderBottom:'1px solid red'}}>
      <label onClick={this.handleClick}>
        <input type="checkbox" />
        {item}
      </label>
    </li>
  );
}
相关文章：