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

//Shopping.js
类扩展组件{
componentDidMount（）{
const products=JSON.parse（localStorage.getItem（'products'）；
this.setState（{products}）；
}   
render（）{
const products=JSON.parse（localStorage.getItem（'products'））| |[]；
返回(
购物车
{products.map（（产品，密钥）=>
)} 
)
}
}
导出默认购物；
//CartProduct.js
类CartProduct扩展了React.Component{
//这就是错误的来源
移除产品（数据）{
const prod=this.props.data.filter（i=>i.id！==data.id）
this.setState（{prod}）
}
render（）{
返回(
{this.props.data.name}
{this.props.data.description}
${this.props.data.price}
去除
)
}
}
使用路由器导出默认值（CartProduct）；

您必须传递一个将由

CardProduct

组件触发的功能。让我们说

onRemove

。此功能的实现将在

购物

组件中，因为您的

产品

状态位于该组件中。您的

CardProduct

中唯一会发生的事情是使用

id

参数调用

onRemove

函数

以下代码将有所帮助：

//Shopping.js
class Shopping extends Component{      
  componentDidMount(){
    const products =  JSON.parse(localStorage.getItem('products'));
    this.setState({products});    
  }

  removeProduct = (pId) =>{
    let products  = this.state.products.filter(product => product.id !== pId);
    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} removeProduct={this.removeProduct}/> 
              )} 
          </div>  
      )
  }
}
    export default Shopping;

//CartProduct.js   
class CartProduct extends React.Component{
  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.props.removeProduct(this.props.data.id)}
              >Remove</Button>                               
          </div>
      )
  }
    }
    export default withRouter(CartProduct);

//Shopping.js
类扩展组件{
componentDidMount（）{
const products=JSON.parse（localStorage.getItem（'products'）；
this.setState（{products}）；
}
removeProduct=（pId）=>{
让products=this.state.products.filter（product=>product.id！==pId）；
this.setState（{products}）；
}
render（）{
const products=JSON.parse（localStorage.getItem（'products'））| |[]；
返回(
购物车
{products.map（（产品，密钥）=>
)} 
)
}
}
导出默认购物；
//CartProduct.js
类CartProduct扩展了React.Component{
render（）{
返回(
{this.props.data.name}
{this.props.data.description}
${this.props.data.price}
去除
)
}
}
使用路由器导出默认值（CartProduct）；

由于您的

产品

列表位于父组件

购物

中，因此您需要保留父组件的删除权限。只需将产品ID从子组件传递到父组件，并删除父组件中的产品。

---

如果这对你有帮助，请告诉我

您正在代码中更新子组件的状态，同时必须更新父组件中的状态。在父组件中创建一个函数handleon removation，并将此函数作为prop传递给子组件，并在该函数中执行相同的逻辑。在子组件中调用函数时，它将触发父组件

您的

removeProduct

功能似乎存在问题。在函数

中，此

不涉及组件。你最好在这里使用箭头函数，比如

removeProduct=（data）=>{..

这个函数是绑定的，有什么区别吗？没有解释的代码没有那么有用