React循环中从类组件向子组件传递handler报handleDeleteUser读取错误

• 核心问题是this指向丢失：你在User.data.map遍历中使用了普通匿名函数作为回调，普通函数的this不会继承外层React组件实例的上下文，在严格模式下默认指向undefined，因此调用this.handleDeleteUser时会抛出找不到属性的报错。
• 次要问题：你在定义click回调时接收的参数是事件对象e，但子组件调用props.click(props.id)时传递的是用户id，参数类型不匹配，在this问题解决后也会出现逻辑错误。

方案1：将map回调改为箭头函数（最推荐） #

箭头函数会自动继承外层作用域的this指向，无需额外绑定，同时修改参数名匹配子组件传值：

// User.js render 部分代码
User.data.map((User, i) => {
  return (
    <DropDownUserTool
      id={User.id}
      click={(id) => {
        this.handleDeleteUser(id);
      }}
    />
  );
});

方案2：为map回调指定this指向 #

如果要保留普通函数写法，可以给map方法传入第二个参数作为回调的this上下文：

// User.js render 部分代码
User.data.map(function (User, i) {
  return (
    <DropDownUserTool
      id={User.id}
      click={(id) => {
        this.handleDeleteUser(id);
      }}
    />
  );
}, this); // 此处传入组件实例作为回调内部的this

方案3：简化传值（可选优化） #

handleDeleteUser已经用类属性箭头函数的方式定义，本身已经绑定了组件实例的this，可以直接传递函数本身，无需额外包一层箭头函数：

// User.js render 部分代码
User.data.map((User, i) => {
  return (
    <DropDownUserTool
      id={User.id}
      click={this.handleDeleteUser}
    />
  );
});

子组件无需修改原有调用逻辑即可正常运行。

内容的提问来源于stack exchange，提问作者Jack The Baker