Wie ajax innerhalb von componentWillMount senden, $ ist undefined

Question

Ich benutze das serverseitige Rendering für die App, ich möchte einige Daten über die API laden, bevor die Seite am Server rendert. Wie ich fand, wird die KomponenteWillMount vor dem Rendern sowohl Server-Seite und Client-Seite aufgerufen, aber es führt den Ajax-Code nicht aus. Sagt $ ist undefined, Bitte jemand sagen mir, wie die Daten vor dem Rendern der Seite geladen werden.

Answer 1

Dies ist eine allgemeine Antwort wegen des Mangels an Details in der Frage. Aber ich hoffe, es bringt etwas Licht in das Thema.

Basierend auf meiner persönlichen Erfahrung, wenn Sie Server-Rendering reagieren Sie besser eine "Controller" Out-most-Komponente, die mit dem gesamten Staat und alles darunter sollte meist kontrolliert werden oder nicht von Ajax abhängen abhängen lade Daten überhaupt. Wenn Sie beispielsweise Redux verwenden, wäre diese "Controller" -Komponente die Provider. Dies liegt daran, dass es für eine Komponente viel einfacher ist, Server und Client als alle anderen zu behandeln.

Jetzt sollte die äußere "Controller" -Komponente wissen, ob es auf dem Server ist und Daten entsprechend anders laden. Eine Möglichkeit, dies zu tun, ist zu überprüfen, ob "Fenster" definiert ist. Das heißt: Wenn Sie sich auf dem Server befinden, verwenden Sie nicht Ajax al all, um den Anfangszustand zu laden. Aber wenn Sie auf dem Client sind, dann verwenden Sie Ajax.

Jetzt haben Sie ein letztes Problem. Wenn Sie Server-Rendering durchführen, möchten Sie nicht, dass der Client zum Server zurückgereist wird, um die gleichen Daten zu erhalten, die er bereits hat. Um dies zu verhindern, rendern Sie einen Skriptblock, der auf dem Client ausgeführt werden soll, der den Anfangszustand enthält, und führen Sie NICHT das Ajax durch, wenn diese Variable gesetzt ist. Wie folgt aus:

<script> 
    window._serverState = {...} 
</script> 

Eine andere Sache .. ich persönlich nicht $ für Ajax verwenden Ich denke nicht, Reagieren und jQuery sollten zusammen verwendet werden. Schauen Sie sich Axios an.

Answer 2

Generell ist es nicht ratsam, einen AJAX-Anruf unter componentWillMount zu tätigen. Da das Rendern sofort nach dem componentWillMount Rendering erfolgt, muss das Rendering warten, bis der Ajax-Aufruf abgeschlossen ist und neue Daten erhalten.

Es ist besser, die Wiedergabe zum ersten Mal mit leeren Zustandsdaten können sagen

data:[] 

und Anruf Ajax in componentDidMount getan, dann ist dies der Ort, wo Sie die DOM-Manipulation durchführen können und Ajax-Anforderung senden.

componentDidMount() { 
sendAjaxRequest() 
.then(
     (newDataFromServer) => { 
       this.setState({data : newDataFromServer }); 

    }); 
} 

Nach neuen Daten abgerufen vom Server den Zustand mit neuen Datensatz

this.setState({data:newDataFromServer}); 

Dies wird die Wieder Rendering verursachen geschehen mit den neuesten Daten vom Server und neue Zustandsänderungen geholt werden reflektiert.