Reagieren: Führen Sie den letzten Teil der Funktion erst nach dem ersten Teil ist vollständig abgeschlossen

Question

Ich habe eine Funktion fetchTweets, die Tweets mit bestimmten Parametern a und b abruft.

Funktion toPageTwo fetchTweets Funktion aufruft, und dann leitet Benutzer auf eine andere Seite, wo die abgerufenen Daten

toPageTwo() { 
     this.fetchTweets(param1,param2); 
     this.props.router.push(`/page2`); 
    } 
} 

toPageTwo gezeigt wird() ausgeführt wird, wenn der Benutzer eine Sendetaste klicken:

<Button onClick={::this.toPageTwo}> 
Send 
</Button> 

Wie kann ich sicherstellen, dass page2 erst geladen wird, nachdem die Tweets richtig abgerufen wurden?

UPDATE:

I Redux und Axios bin mit dem Tweets und die Taste zu holen, die das Abrufen usw. beginnt, wird in der Seitenleiste befinden. Meine Dateibaum sieht wie folgt aus:

src 
    redux 
    actions 
     tweets.js 
    common 
    sidebar.js 

tweets.js:

import axios from "axios"; 

export function fetchTweets(a,b){ 
    return function(dispatch) { 
     axios.get("http://127.0.0.1:5000/?a="+a+"&b="+b) 
     .then((response) => { 
      dispatch({type: "FETCH_TWEETS_FULFILLED", payload: response.data}) 
     }) 
     .catch((err) => { 
      dispatch({type: "FETCH_TWEETS_REJECTED", payload: err}) 
     }) 
    } 
} 

Wenn ich ".then" zu FETCH_TWEETS_FULFILLED Versand hinzufügen, ich bin in der Lage log zu trösten, nachdem holen. Dies gilt jedoch nicht mit this.props.router.push (/page2)

sidebar.js arbeiten:

-- IMPORTS -- 
@connect((state) => state) 

@withRouter 
class ApplicationSidebar extends React.Component { 

    -- BUNCH OF FUNCTIONS -- 

    fetchTweets(a,b) { 
     this.props.dispatch(fetchTweets(a,b)); 
    } 

    toPageTwo() { 
      fetchTweets(param_a,param_b); 
      this.props.router.push(`/page2`); 
     } 
    } 


    render() { 
     return (
      -- SIDEBAR STUFF -- 

       <Button onClick={::this.toPageTwo}> 
       Send 
       </Button> 

     ); 
    } 

Aus irgendeinem Grund eine Rückruffunktion zu schaffen ergibt das gleiche Ergebnis wie reguläre Funktion: diese Funktion ist wird ausgeführt, bevor der erste Teil (das Holen von Tweets) abgeschlossen ist.

Danke!

Answer 1

Ich denke, fetchTweets zu modifizieren, um einen Rückruf zu nehmen, wäre der beste Weg, dies zu tun.

z.

import axios from "axios"; 

export function fetchTweets(a,b, callback){ 
    return function(dispatch) { 
     axios.get("http://127.0.0.1:5000/?a="+a+"&b="+b) 
     .then((response) => { 
      dispatch({type: "FETCH_TWEETS_FULFILLED", payload: response.data}) 
      callback() 
     }) 
     .catch((err) => { 
      dispatch({type: "FETCH_TWEETS_REJECTED", payload: err}) 
     }) 
    } 
} 

und

-- IMPORTS -- 
@connect((state) => state) 

@withRouter 
class ApplicationSidebar extends React.Component { 

-- BUNCH OF FUNCTIONS -- 

    fetchTweets(a,b, callback) { 
     this.props.dispatch(fetchTweets(a,b, callback)); 
    } 

Jetzt ist hier, wo Sie eine anonyme Funktion als Callback übergeben, zum Beispiel.

toPageTwo() { 
      fetchTweets(param_a,param_b,() => {this.props.router.push(`/page2`)); 
     } 
    } 


    render() { 
     return (
      -- SIDEBAR STUFF -- 

       <Button onClick={::this.toPageTwo}> 
       Send 
       </Button> 

     ); 
    } 

Answer 2

könnten Sie ein, ob und ein Boolean verwenden, das heißt:

toPageTwo() 
{ 
    if(fetchTweets(param1,param2)) 
    { 
     this.props.router.push(`/page2`); 
    } 
} 

Answer 3

Sie this.props.router.push(/page2) nach Erfolg fetchTweets(param1,param2) Netzanruf schreiben kann.

Oder Sie können Versprechen verwenden und this.props.router.push(/page2 ); im Erfolg dieses Versprechens verwenden.

Answer 4

Sie können den Router als Parameter an die Aktion übergeben. Ich bin mir nicht sicher, ob dies der beste Ansatz ist, aber es sollte funktionieren.

toPageTwo() { 
     this.fetchTweets(param1,param2, this.props.router); 
    } 
} 



export function fetchTweets(a,b, router){ 
    return function(dispatch) { 
     axios.get("http://127.0.0.1:5000/?a="+a+"&b="+b) 
     .then((response) => { 
      dispatch({type: "FETCH_TWEETS_FULFILLED", payload: response.data}); 
      router.push('/page2') 
     }) 
     .catch((err) => { 
      dispatch({type: "FETCH_TWEETS_REJECTED", payload: err}) 
     }) 
    } 
}