Javascript 反应如何传递带有参数作为道具的函数？

我有一个子组件。在此组件中，我尝试从父组件调用函数，并在此函数中传递一个参数：

子组件：

class CartItem extends Component {
    constructor() {
        super();
        this.state = {
            id: ''
        }
    }

   componentDidMount() {
        this.setState({ id: this.props.cartItem.Id })
    }

    deleteHandler = () => {
        this.props.deleteItem(this.state.id);
    }

    render() {
      return ( <button onClick={this.deleteHandler}>Delete</button>);
 }
}

类CartItem扩展组件{
构造函数（）{
超级（）；
此.state={
id:“”
}
}
componentDidMount（）{
this.setState（{id:this.props.cartItem.id}）
}
deleteHandler=（）=>{
this.props.deleteItem（this.state.id）；
}
render（）{
返回（删除）；
}
}

父组件：

class OrderStepTwoIndex extends Component {
    constructor(props) {
        super(props);
        this.state = {
            deletedItemId: ''
        }
    }

  deleteItem = (id) => {
        debugger;
        this.setState(prevState => ({
            deletedItemId: { ...prevState.deletedItemId, id }
        }));
    }

  render() {
      return (
            {
              this.props.cartItems.map(function (item, key) {
                return <CartItem 
                            key={key} 
                            deleteItem={() => this.deleteItem()} 
                            cartItem={item} />
                                                })
            }
           );
    }
}

类OrderStepTwoIndex扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ deletedItemId:' } } deleteItem=（id）=>{ 调试器； this.setState（prevState=>({ deletedItemId:{…prevState.deletedItemId，id} })); } render（）{ 返回( { this.props.cartItems.map（函数（项，键）{ 返回此.deleteItem（）} cartItem={item}/> }) } ); } }

---

因此，现在我有一个错误：“无法读取未定义的属性‘deleteItem’”

每当您在javascript中创建

函数时，它就会创建一个带有
this
的作用域。比较中的箭头函数总是从外部作用域获取此

因此，尝试在

map

回调中使用箭头函数：

this.props.cartItems.map((item, key) => (
    <CartItem 
        key={key} 
        deleteItem={() => this.deleteItem()} 
        cartItem={item} />
)

this.props.cartItems.map（（项目，键）=>(
this.deleteItem（）}
cartItem={item}/>
)

无论何时在javascript中创建

函数

，它都会使用

此

创建一个作用域。相比之下，箭头函数总是从外部作用域获取

此

因此，尝试在

map

回调中使用箭头函数：

this.props.cartItems.map((item, key) => (
    <CartItem 
        key={key} 
        deleteItem={() => this.deleteItem()} 
        cartItem={item} />
)

this.props.cartItems.map（（项目，键）=>(
this.deleteItem（）}
cartItem={item}/>
)