Wie kann man Daten asynchron innerhalb einer Komponente abrufen und sie als Requisiten an eine andere Komponente übergeben?

Question

Ich habe eine Reactive-App und möchte einige Daten asynchron abrufen, verarbeiten, den Status der aktuellen Komponenten ändern und sie dann als Requisiten an eine andere Komponente im Render übergeben. Ich habe versucht, es in ComponentWillMount abzurufen, scheint aber, dass das Rendern noch vor dem Abrufen der Daten erfolgt. Was ist eine funktionierende Lösung dafür? Ich habe auch versucht, die Daten in einem ES6-Konstruktor abzurufen, und das Problem besteht weiterhin.

Jede Hilfe wird sehr geschätzt!

Answer 1

Nun ein idealer Ort, um die Daten zu holen wäre die componentWillMount Funktion, aber wegen der asynchronen Natur Ihre Kind-Komponente kann gerendert werden, bevor die Daten abgerufen und damit können Sie zwei Dinge tun.

einen Ladezustand beibehalten, die nicht die Komponente, bis das Ergebnis nicht machen geholt, wie:

constructor() { 
    super(); 
    this.state = { 
     isLoading: true, 
     // other states 
    } 
} 

componentWillMount() { 
    //your async request here 
} 

render() { 
    if(this.state.isLoading) { 
     return null; // or you can render laoding spinner here 
    } else { 
     return (
      //JSX here with the props 
     ) 
    } 
} 

Andere Art und Weise ist eine leere Stütze haben und für eine Überprüfung in der Unterkomponente durchführen:

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

componentWillMount() { 
    //your async request here 
} 

render() { 

    return (
     <Child someProps={this.state.someProps}/> 
    )  
} 

Kinder

render() { 

    if(this.props.someProps == null) 
     return null; 
    else { 
     return (//JSX contents here); 
    } 
}