Ich erstelle eine einfache Chat-App, in der ich über Axios einen API-Aufruf an meine Datenbank mache, der ein Array von Nachrichtenobjekten zurückgibt. Ich bin in der Lage, die Daten zu erhalten, wenn ich in componentWillMount einen Axios-Aufruf mache. Dann versuche ich SetState um die Konversation anzuzeigen. Hier ist der Code:
%Vor%Ich habe einige Posts über Lifecycle-Funktionen und Einstellungsstatus gesehen, und es scheint, als würde ich das Richtige tun.
Nochmal, um hervorzuheben, dass der Axios-Call in Ordnung ist und der Zustand nicht funktioniert. Ich sehe immer noch ein leeres Array. Vielen Dank im Voraus!
EDIT: Hier ist die Lösung für mein Problem speziell. Es wurde in einem Kommentar begraben, also dachte ich, ich würde es hier lassen ..
"Ich habe das Problem entdeckt. Es war tatsächlich so, wie ich meine Daten analysiert habe. Der Spread-Operator auf ... messages.content hat nicht funktioniert, weil messages.content nicht existiert. messages [i] .content exists Also habe ich versucht, nur ... messages zu verbreiten Dann habe ich in einer untergeordneten Komponente die Objekte überlagert und die .content -Eigenschaft analysiert. Danke für die Hilfe! "
In Ihrem Fall funktioniert Ihr setState() nicht, weil Sie setState() in einem asynchronen Rückruf verwenden
Arbeitsgeige: Ссылка
Sie führen einen API-Aufruf durch, der asynchron ist. Daher wird der setState erst nach dem Empfang der Daten aufgerufen. Es macht nichts mit componentWillMount oder componentDidMount . Sie müssen mit dem leeren message in Ihrem Rendering umgehen. Wenn Sie Ihre Daten von der API erhalten, legen Sie diese Daten auf den Status fest, und die Komponente wird mit dem neuen Status erneut gerendert, der sich in Ihrem Rendering widerspiegelt.
Pseudocode:
%Vor%componentWillMount () wird unmittelbar vor dem Mounting aufgerufen. Es wird vor render () aufgerufen, daher wird der Status in dieser Methode gesetzt kein erneutes Rendering auslösen. Vermeiden Sie irgendwelche Nebenwirkungen oder Abonnements in dieser Methode. Docs
Sie müssen also componentDidMount als -
Tags und Links javascript state reactjs