React.js在执行第一个函数后设置回调函数

我一直在调用我的React.js/Redux应用程序的onClick事件上的api。在调用API后，我必须根据第一个API的结果调用另一个API。所以我在考虑异步调用。React.js在执行第一个函数后设置回调函数

我的代码：

<a href="" onClick={(e) => this.sendData(e)} >Send</a>

和方法送出数据是

sendData(e){ 
    e.preventDefault(); 
    this.props.sendDataApi({this.refs.msg.value}); 
    //After receiving results from above api, i have to call another api async 
    this.props.getDetails(this.refs.txt.value); 
}

但currenlty两种API称为在同一时间。任何帮助！

来源

2017-05-14 h_a86

处理异步最好的地方调用与终极版是直接行动的创建者。我的意思是等待行动创建者异步调用的结果 – madox2

有没有办法通过回调来完成！ –

您应该考虑使用异步/等待模式来处理该场景。然后，您的代码应该是这样的：

const sendData = async message => { 
    const messageId = await sendDataApi(message) 
    const details = await getDetails(messageId) 
    return details 
}

但是，如果你不能够使用最新的语言特性，你可以使用Promise秒。请记住，代码将更容易回调 - 地狱，他们可能也需要polyfilling。

与承诺同样的代码应该是这样的：

const sendData = message => { 
    sendDataApi(message) 
    .then(messageId => getDetails(messageId)) 
}

此代码是与承诺的问题只是一个例子，因为它可以减少只是sendDataApi(message).then(getDetails)。当存在复杂的条件逻辑，错误处理，更多任务和参数传递时会出现问题。

React处理异步很差，Redux也是如此。您需要使用redux-thunk，redux-saga或其他中间件。这样，您就可以从动作创建者发送另一个动作（continuation，trunk，saga - 您的名字）。它可能变得单调乏味，需要很多样板，并且很难调试。您可能会考虑让Redux同步状态管理，并考虑其他解决方案（RxJS也许？）以解决这些类型的问题。

请使用React的默认setState（请参阅控制台输出）see an example of using Promises to chain two asynchronous calls。

随着redux-thunk实现可能是这样的（其他动作不显示，没有错误处理等）：

... 

const sendData = message => { 
    return dispatch => { 
    return sendDataApi(message).then(
     messageId => dispatch(getDetails(messageId)), 
    ); 
    }; 
}

来源

2017-05-14 22:24:43

感谢您的详细回复，我会用它来解决我的问题。非常感激！ –

我使用异步，等待技术，它的工作。再次感谢。对于未来看到这个问题的人，请使用'babel-polyfill'，因为它需要使用异步，请等待React。参考检查这个：http://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined-with-async-await –

React.js在执行第一个函数后设置回调函数

回答

相关问题