Question

我正在从事电子商务，但是在从购物车中删除产品时遇到问题。我试图创建一个函数，但是没有成功，老实说，我不知道该怎么做才能使它起作用。我看到的错误是这样的： '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);

Answer 1

您必须传递一个将由CardProduct组件触发的函数。假设onRemove。该功能的实现将在Shopping状态下存在于products组件中。 CardProduct中唯一发生的事情是使用onRemove参数调用id函数。

Answer 2

以下代码会有所帮助：

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

由于您的products列表位于父组件Shopping中，因此您需要保留对父组件的移除权限。只需将产品ID从子组件传递到父组件，然后删除父组件中的产品。让我知道这是否对您有帮助。

Answer 3

您正在更新代码中子组件的状态，而您必须更新父组件中的状态。在父组件中创建一个函数handleOnRemoval并将此函数作为道具传递给子组件，并在该函数中实现相同的逻辑.when在子组件中调用函数时，将触发父组件的handle事件

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

3 个答案: