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

Question

I have a child component. In this component I'm trying to call function from parent component and pass in this function a parameter:

Child component:

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>);
 }
}

Parent coomponent:

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} />
                                                })
            }
           );
    }
}

So, now I have an error: "Cannot read property 'deleteItem' of undefined"

Answer 1

Whenever you create function in javascript, it creates a scope with this . Arrow functions in comparison always take this from the outer scope.

So, try to use arrow function in map callback:

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