0
votes

Appeler réagit dans une autre méthode de classe ne met pas à jour

J'essaie de comprendre pourquoi je suis incapable de mettre à jour l'état dans l'exemple ci-dessous. Calling SupprimerFromOrder fonctionne directement comme prévu, mais dès que je l'appelle à partir de déducteurCount , l'état ne sera-t-il pas à jour.

Quelqu'un pourrait-il m'aider s'il vous plaît à comprendre cela?

J'ai reproduit le problème sur CodePen ici < / p> xxx


                        
                        
                            
                                                                    reactjs
                                                                    setstate
                                                            
                        
                                                    
                            
                            
                                1 commentaires
                                
                                                                            Sur  commande [clé] === 0  Vous mettez à jour l'état deux fois, une fois à partir de  revefromorder , puis vous le remplacez avec  this.setstate ({commande}) < / code>



                                    
                    4 Réponses :
                    
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Il vous manque l'essentiel, alors vous appelez le  déductionCount , vous mettez à jour deux fois la commande  dans l'état 
Essayez quelque chose comme ça  xxx                                  


                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Je pense que vous n'avez pas besoin d'appeler RemoveFromOrderOrder () à l'intérieur de la fonction déductordercount () car il mettra à jour l'état deux fois en tant que mise à jour deux fois donnera à deux étages                                 

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     C'est parce que vous devriez retourner cette fonction.ReMoveFromOrderOrder () pour ne plus mettre de côté après l'avoir appelé. 

 si inséré de:
 si (commande] === 0) this.removefromorder (clé) // Supprimer l'ordre [Touche]  

 aller avec:
 si (commande [touche] === 0) renvoie ceci.removefromorder (clé) // Supprimer l'ordre [Touche]                                  


                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Merci pour les réponses, effectivement je mettais à jour l'État deux fois. Je dois le voir en ajoutant juste un  Settimeout ((() => {this.setstate ({commande})}, 3000)  code> dans  déducteurCount  code>. Et puis j'ai vu que l'article a été retiré de l'état une fois que  Retirezfromorder  code> a été invoqué, puis est apparu à nouveau. 
class Order extends React.Component {
  renderOrder = (key) => {
    const item = this.props.items[key];
    const count = this.props.order[key];
    return (
      <li key={key}>
        {count} pieces of {item.name}
        <button onClick={() => this.props.deductOrderCount(key)}>&minus;</button>
        <button onClick={() => this.props.removeFromOrder(key)}>&times;</button>
      </li>
    )
  }
  render() {
    const orderIds = Object.keys(this.props.order);
    return (
      <div>
        {orderIds.map(this.renderOrder)}
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    items: { item1: { name: 'chocolate', price: 100}, item2: { name: 'bread', price: 50}},
    order: { item1: 3, item2: 2 }
  };

  removeFromOrder = key => {
    // 1. take a copy of state
    const order = { ...this.state.order };
    // 2. remove item from order
    delete order[key];
    // 3. call setState to update our state object
    this.setState({ order });
  };

  deductOrderCount = (key) => {
    // 1. take a copy of state
    const order = { ...this.state.order };
    // 2. deduct 1 from the count and when it hits 0 remove from the order
    order[key] = (order[key] > 1) ? (order[key] - 1) : 0;
    if (order[key] === 0) this.removeFromOrder(key); //delete order[key]
    // 3. call setState to update our state object
    setTimeout(() => {this.setState({ order })}, 3000)
  }

  render() {
    return (
      <div>
        <Order
          order={this.state.order}
          items={this.state.items} 
          removeFromOrder={this.removeFromOrder}  
          deductOrderCount={this.deductOrderCount}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("main"));

                                

                                                                    
                                    
                                    
                                        0 commentaires