React如何传递带参函数作为Props？及代码报错解决咨询

嘿，我来帮你搞定这个报错！你遇到的Cannot read property 'deleteItem' of undefined问题，主要出在两个地方：父组件里map回调的this指向错误，以及传递deleteItem函数prop的方式不对。咱们一步步修复：

1. 修复父组件的this指向问题 #

你在父组件的map方法里用了普通函数作为回调：

this.props.cartItems.map(function (item, key) { ... })

普通函数会创建自己的this上下文，导致函数内部的this不是组件实例，自然找不到this.deleteItem。把它换成箭头函数就能解决，箭头函数会继承外部的this：

class OrderStepTwoIndex extends Component {
  constructor(props) {
    super(props);
    this.state = { deletedItemIds: [] } // 建议改成数组存储多个删除id，更符合常见需求
  }
  deleteItem = (id) => {
    debugger;
    // 用数组存储已删除id的示例写法，可根据你的实际需求调整
    this.setState(prevState => ({ 
      deletedItemIds: [...prevState.deletedItemIds, id] 
    }));
  }
  render() {
    return (
      <>
        {this.props.cartItems.map((item, key) => {
          // 直接在传递时绑定当前item的Id作为参数
          return <CartItem key={key} deleteItem={() => this.deleteItem(item.Id)} cartItem={item} />
        })}
      </>
    );
  }
}

这里顺便调整了deletedItemId的state结构——如果需要存储多个删除的id，用数组比对象更直观，你可以根据实际业务修改。

2. 简化子组件的逻辑 #

你之前在子组件里把cartItem.Id存到state里完全是多余的，直接使用props中的值就好，减少不必要的state操作。修改后的子组件可以简化成这样：

class CartItem extends Component {
  render() {
    // 直接把父组件传递过来的绑定好参数的函数赋值给onClick
    return <button onClick={this.props.deleteItem}>Delete</button>;
  }
}

如果子组件需要在点击时做额外逻辑（比如弹窗确认），可以保留deleteHandler：

class CartItem extends Component {
  deleteHandler = () => {
    // 这里可以加额外逻辑，比如删除确认提示
    this.props.deleteItem();
  }
  render() {
    return <button onClick={this.deleteHandler}>Delete</button>;
  }
}

另一种传递方式：父组件传函数，子组件传参数 #

如果你希望父组件只传递原始函数，由子组件决定传入什么参数，也可以这么写：

父组件： #

<CartItem key={key} deleteItem={this.deleteItem} cartItem={item} />

子组件： #

class CartItem extends Component {
  deleteHandler = () => {
    // 子组件调用时传入当前item的Id
    this.props.deleteItem(this.props.cartItem.Id);
  }
  render() {
    return <button onClick={this.deleteHandler}>Delete</button>;
  }
}

这种方式更灵活，适合子组件需要动态决定参数的场景。

内容的提问来源于stack exchange，提问作者Mikhail Kostiuchenko