Je travaille sur la création d'une liste de tâches, j'ai reçu une mise à jour, c'est-à-dire en ajoutant les données au stockage local afin que si l'onglet est actualisé, les données soient récupérées du stockage local. Le problème est que lorsque la deuxième tâche est ajoutée, la première est téléchargée sur le stockage local

  functionToSetLocalStorage () {
  console.log(this.state.items);
  }

  addItem(e) {
  if (this._inputElement.value !== "") {
      
      var newItem = {
        text: this._inputElement.value,
        key: Date.now()
      }
      
      console.log(this.state.items); 
      this.setState((prevState) =>{
        return {
         items: prevState.items.concat(newItem)      
      }
      }, this.functionToSetLocalStorage);
           
                  
          console.log(this.state.items);
          this._inputElement.value = ""; 
      }  
      
      e.preventDefault();
      localStorage.setItem('todoEntries',JSON.stringify(this.state.items));
  } 

Quelqu'un peut-il m'aider avec pourquoi y a-t-il un retard?

1
manthankumbhar 7 oct. 2020 à 05:59

1 réponse

Meilleure réponse

setState est une fonction asynchrone
essayez d'ajouter localStorage.setItem('todoEntries',JSON.stringify(this.state.items)); dans votre fonction setState avant de retourner un nouvel état.

    this.setState((prevState) =>{
       localStorage.setItem('todoEntries',JSON.stringify(prevState.items.concat(newItem) ));
       return {
         items: prevState.items.concat(newItem)      
       }
     }, this.functionToSetLocalStorage);
           
        
2
hugholousk 7 oct. 2020 à 03:23