1
votes

Comment puis-je supprimer un produit du panier?

Je travaille sur un site e-commerce et j'ai un problème avec la suppression de produits du panier. J'ai essayé de créer une fonction mais sans succès, honnêtement, je ne sais pas quoi faire pour qu'elle fonctionne ... L'erreur que je vois est la suivante: 'TypeError: this.props.data.filter n'est pas une fonction'

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

javascript reactjs

2 commentaires

Le problème semble avec votre fonction removeProduct . À l'intérieur de la fonction ce ne fait pas référence au composant. Vous feriez mieux d'utiliser la fonction de flèche ici comme removeProduct = (data) => {..

La fonction est liée, quelle est la différence?

3 Réponses :

1
votes

Vous devez passer une fonction qui sera déclenchée par le composant CardProduct . Disons onRemove . L'implémentation de cette fonction sera intégrée au composant Shopping car l'état de vos produits y réside. La seule chose qui aura lieu dans votre CardProduct est l'invocation de la fonction onRemove avec le paramètre id .

0 commentaires

1
votes

Le code suivant vous aidera:

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

Comme votre liste de produits est dans votre composant parent Shopping , vous devez donc conserver le pouvoir de suppression du composant parent. Il vous suffit de transmettre l'ID produit du composant enfant au composant parent et de supprimer le produit du composant parent. Faites-moi savoir si cela vous aide.

1 commentaires

Le code sans explication n'est pas aussi utile

0
votes

Vous mettez à jour l'état du composant enfant dans votre code alors que vous devez mettre à jour l'état dans le composant parent. créer une fonction handleOnRemoval dans le composant parent et passer cette fonction comme accessoire au composant enfant et implémenter la même logique dans cette fonction .quand la fonction est appelée dans le composant enfant, elle déclenchera l'événement handle du composant parent

0 commentaires