反應：只有在第一部分完全完成之後才執行函數的後半部分

Question

我有一個fetchTweets函數，它用給定的參數a和b獲取推文。

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

：當用戶點擊發送按鈕正在執行

功能toPageTwo調用fetchTweets功能，然後重定向用戶到所獲取的數據被示出

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

toPageTwo（另一頁）我怎麼才能確保page2只在推文被正確提取後才被加載？

UPDATE：

我使用終極版和Axios公司獲取的鳴叫和啓動位於側邊欄獲取等按鈕。我的文件樹是這個樣子：

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}) 
     }) 
    } 
} 

如果我添加「然後」以FETCH_TWEETS_FULFILLED派遣，我能夠讀取後，控制檯日誌。然而，這並不與this.props.router.push（/page2）

sidebar.js工作：

-- 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> 

     ); 
    } 

出於某種原因，創建一個回調函數產生相同的結果定時功能：後者功能在第一部分（tweet提取）完成之前執行。

謝謝！

Answer 1

我認爲修改fetchTweets採取回調將是最好的方式來做到這一點。

例如。

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}) 
     }) 
    } 
} 

和

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

@withRouter 
class ApplicationSidebar extends React.Component { 

-- BUNCH OF FUNCTIONS -- 

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

現在，這裏是你通過一個匿名函數作爲回調，例如。

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


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

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

     ); 
    } 

Answer 2

你可以使用一個，如果和一個布爾值，即：

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

Answer 3

可以fetchTweets(param1,param2)網絡呼叫成功後寫this.props.router.push(/page2)。

或者您可以使用承諾，並使用this.props.router.push(/page2 );成功承諾。

Answer 4

您可以將路由器作爲參數傳遞給動作。我不確定這是否是最好的方法，但它應該起作用。

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}) 
     }) 
    } 
}