Question

我有一个函数fetchTweets，它使用给定的参数a和b来获取推文。

函数toPageTwo调用fetchTweets函数，然后将用户重定向到另一个显示获取数据的页面

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

当用户单击发送按钮时，

toPageTwo（）正在执行：

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

我怎样才能确保在正确提取推文后才加载page2？

更新：

我正在使用Redux和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})
        })
    }
}

如果我将“.then”添加到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>

        );
     }

由于某些原因，创建回调函数会产生与常规函数相同的结果：后一个函数在第一部分（推文提取）完成之前执行。

谢谢！

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

您可以使用if和Boolean，即：

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

Answer 3

this.props.router.push(/page2)网络电话成功后，您可以写fetchTweets(param1,param2)。

或者您可以使用承诺，并使用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})
        })
    }
}

React：仅在第一部分完全完成后才执行函数的后半部分

4 个答案: