javascript - 如何从购物车中删除产品？

我正在从事电子商务，但是在从购物车中删除产品时遇到问题。我试图创建一个函数，但是没有成功，老实说，我不知道该怎么做才能使它起作用。
我看到的错误是这样的：
'TypeError：this.props.data.filter不是函数'

//Shopping.js
class Shopping extends Component{
        componentDidMount(){
            const products =  JSON.parse(localStorage.getItem('products'));
            this.setState({products});
        }
        render(){
            const products =  JSON.parse(localStorage.getItem('products')) || [];
            return(
                <div>
                 <h3>Shopping Cart</h3>
                   {products.map((product, key) =>
                      <CartProduct key={key} data={product}/>
                   )}
                </div>
            )
        }
    }
    export default Shopping;

    //CartProduct.js
class CartProduct extends React.Component{
        //this is where the error comes from
        removeProduct(data){
            const prod = this.props.data.filter(i => i.id !== data.id)
            this.setState({prod})
        }
        render(){
            return(
                <div>
                    <img
                       src={this.props.data.img}
                    />
                    <h4>{this.props.data.name}</h4>
                    <span>{this.props.data.description}</span>
                    <h4 >${this.props.data.price}</h4>
                    <Button
                        onClick={this.removeProduct.bind(this)}
                    >Remove</Button>
                </div>
            )
        }
    }
    export default withRouter(CartProduct);

最佳答案

您必须传递将由CardProduct组件触发的功能。假设onRemove。此功能的实现将存在于Shopping组件中，因为您的products状态在那里。 CardProduct中唯一发生的是使用onRemove参数调用id函数。