React - setzen Anfangszustand von api

Question

Ich habe eine Pause API Back-End eingerichtet. Ich bin jedoch neu zu reagieren. Ich möchte Werte innerhalb der Funktion getInitialState für eine Komponente festlegen. Aber ich kann nicht herausfinden, wie ich das Objekt, das ich zurückgeben muss, auffüllen kann, da ich eine asynchrone HTTP-Anfrage verwende. Das Objekt, das ich zurückgebe, hat wie erwartet undefinierte Werte. Wie komme ich hier zurecht?
Ich benutze fetch (kann zu jeder anderen Bibliothek, ehrlich) ab sofort wechseln. Ich kann nicht herausfinden, wie getInitialState aufgerufen wird, nachdem der asynchrone Aufruf einen Wert zurückgegeben hat, bevor es passiert.

import React from 'react'; 
import 'whatwg-fetch'; 

export default class IndexPage extends React.Component { 

    render() { 

    // I basically need to call getInitialState after the last promise has been resolved 
    fetch('https://localhost:3000/api/aye') 
    .then(function(response) { 
     return response.json(); 
    }) 
    .then(function(json) { 
     // Need to return some values from this. 
    }); 

    return (
     <div> 
     <h1>{this.state.jsonReturnedValue}</h1> 
     </div> 
    ); 
    } 
} 

Vielen Dank im Voraus!

Answer 1

Sie sollten this.setState aufrufen, um state Werte

export default class IndexPage extends React.Component { 
 

 
    constructor() { 
 
    super(); 
 
    
 
    this.state = { 
 
     jsonReturnedValue: null 
 
    } 
 
    } 
 
    
 
    componentDidMount() { 
 
    fetch('https://localhost:3000/api/aye') 
 
     .then(response => response.json()) 
 
     .then(json => { 
 
     this.setState({ jsonReturnedValue: json }); 
 
     }); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <h1>{ this.state.jsonReturnedValue }</h1> 
 
     </div> 
 
    ); 
 
    } 
 
}

Answer 2

Sie sollten etwas im folgenden tun. Erstellen Sie zuerst die state in der constructor Methode. Dies ermöglicht Ihnen dann, diesen Wert in Ihrer render Methode zu verwenden, indem Sie auf {this.state.jsonReturnedValue} verweisen. Die constructor()-Methode ist die ES6-Version von getInitialState(), falls Sie sich dessen nicht bewusst sind. Hier sollten Sie die state der Komponente einstellen.

Dann in den componentDidMount, die nach dem render Verfahren laufen können Sie die API-Aufruf api machen und setState Methode der Reaktion, um den Wert von this.state.jsonReturnedValue zu aktualisieren.

Wenn this.setState() einen neuen Wert ausführt und setzt, wird die Methode render erneut ausgeführt und die Ansicht entsprechend aktualisiert.

export default class IndexPage extends React.Component { 

    constructor(){ 
    super(); 
    this.state = { 
     jsonReturnedValue: null 
    } 
    } 

    componentDidMount() { 
    this.jsonList(); 
    } 

    jsonList() { 
    fetch('https://localhost:3000/api/aye') 
    .then(function(response) { 
     this.setState({ 
     jsonReturnedValue: response.json() 
     }) 
    }) 
    } 

    render() { 
    return (
     <div> 
     <h1>{this.state.jsonReturnedValue}</h1> 
     </div> 
    ); 
    } 
} 

Answer 3

In Ihrer Situation zu ändern -

Es ist besser, die Wiedergabe zum ersten Mal zu tun bekommen mit leere Zustandsdaten können sagen

constructor(props){ 
    super(props); 

    this.state = { 
     data : [] 
    }; 
} 

und Ajax-Aufruf in componentDidMount machen, ist dies der Ort, wo man dom Manipulation durchführen kann und ajax Anfrage senden, um Daten über REST zu holen.

Nach neuen Daten abgerufen vom Server des Staat mit neuer Datensatz

this.setState({data:newDataFromServer}); 

zB In componentDidMount

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

    }); 
} 

Dies bewirkt, dass die Wieder Rendering mit dem neuesten Daten passieren geholt aus Server- und neue Statusänderungen werden wiedergegeben.