Pourquoi setState pas mis mon tableau en annexant état?

voix
1

Je dois créer une zone de texte qui , pris plusieurs liens alors je split()dans un tableau ouais Son travail de fin, mais je veux mettre ce tableau dans mon statedans linkList: []mais quand je clique à bouton pour le soumettre me donne un tableau vide comme j'Initialize. mais quand j'appuyez de nouveau pour le bouton d' envoi il me donne ma liste de votre choix, pourquoi? voici le code et les sorties

onSubmit = event => {
    this.setState({ loading: true, host: undefined });
    const { text, linkList } = this.state;

    console.log(text);
    const mList = text.split(\n).filter(String);
    console.log(mList);
    this.setState({
      linkList: [...mList]
    });
    console.log(linkList);

    event.preventDefault();
  };

Console de sortie (premier clic)

youtube.com
google.com
facebook.com
------------------------------------------------------------
[youtube.com, google.com, facebook.com]
------------------------------------------------------------
[]

Console de sortie (deuxième clic)

youtube.com
google.com
facebook.com
--------------------------------------------- 
[youtube.com, google.com, facebook.com]
---------------------------------------------
[youtube.com, google.com, facebook.com]
Créé 13/01/2020 à 23:51
source utilisateur
Dans d'autres langues...                            


3 réponses

voix
0

Le code ci-dessous pourrait vous aider.

onSubmit = event => {
    this.setState({ loading: true, host: undefined }, () => {
      const { text, linkList } = this.state;

      console.log(link);
      const mList = text.split("\n").filter(String);
      console.log(mList);
      this.setState({
        linkList: [...mList]
      }, () => {
        console.log(linkList);
        event.preventDefault();
      });
    });
  };
Créé 13/01/2020 à 23:54
source utilisateur

voix
1

setStateest asynchrone. Cela signifie qu'il ne se produit pas tout de suite, mais très peu de temps plus tard à la place. Si vous ajoutez un:

console.log(linkList)

en haut de votre render, vous verrez les éléments ajoutés étant comme vous attendez.

Créé 13/01/2020 à 23:54
source utilisateur

voix
1

Il est sans doute d'être ajouté, il est tout simplement pas disponible jusqu'à ce que le Render suivant.

De la documentation :

setState()ne met pas toujours immédiatement le composant. Il peut par lots ou de reporter la mise à jour plus tard. Cela rend la lecture this.statejuste après avoir appelé setState()un piège potentiel . Au lieu de cela, l' utilisation componentDidUpdateou un setStaterappel ( setState(updater, callback)), que ce soit dont sont garantis au feu après la mise à jour a été appliquée.

Créé 14/01/2020 à 00:07
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more