Warum setzt setState nicht meinen Array in dem Zustand anhängt?

stimmen
1

Ich muss einen Textbereich erstellen , die ich mehrere Links genommen dann split()in ein Array ja seine Arbeit gut, aber ich möchte , dass Array in meinem setzen statein , linkList: []aber wenn ich auf Schaltfläche klicken für die Einreichung es gibt mir leeres Array als ich initialisieren. aber wenn ich wieder drücken Sie die Taste einreichen dann gibt es mir meine gewünschte Liste, warum? hier sind Code und Ausgänge

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();
  };

Ausgabekonsole (First Click)

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

Ausgabekonsole (zweiter Klick)

youtube.com
google.com
facebook.com
--------------------------------------------- 
[youtube.com, google.com, facebook.com]
---------------------------------------------
[youtube.com, google.com, facebook.com]
Veröffentlicht am 13/01/2020 um 23:51
quelle vom benutzer
In anderen Sprachen...                            


3 antworten

stimmen
0

Der Code unten könnte helfen.

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();
      });
    });
  };
Beantwortet am 13/01/2020 um 23:54
quelle vom benutzer

stimmen
1

setStateist asynchron. Das heißt, es geschieht nicht sofort, aber eine sehr kurze Zeit später statt. Wenn Sie ein Add:

console.log(linkList)

an der Spitze Ihrer Render-Methode, sehen Sie die Elemente erwarten wie Sie angehängt wird.

Beantwortet am 13/01/2020 um 23:54
quelle vom benutzer

stimmen
1

Wahrscheinlich wird angefügt, es ist einfach nicht verfügbar, bis die nächste machen.

Aus der Dokumentation :

setState()nicht immer sofort die Komponente aktualisieren. Es kann Batch oder das Update erst später vornehmen . Dies macht das Lesen this.statedirekt nach dem Aufruf setState()eine potentielle Gefahr . Verwenden Sie stattdessen componentDidUpdateoder ein setStateRückruf ( setState(updater, callback)), von denen jeder an Feuer garantiert , nachdem das Update angewendet wurde.

Beantwortet am 14/01/2020 um 00:07
quelle vom benutzer

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