了解ReactJS中的承诺和回调

Question

如何在渲染中访问标题的值？我还没有全面了解承诺和回调。

callback = (err, feed)=> {
    let titles =[]
    feed.items.forEach((entry)=> {
        titles.push(entry.title + ':' + entry.link);
    })
    return titles
}

render() {        
    this.state.parser.parseURL(this.state.proxy + 
        'http://feeds.bbci.co.uk/news/rss.xml?edition=uk', this.callback)
}

Answer 1

Theres 2问题在这里：

1. render()方法必须返回有效的JSX。不要在render()中调用外部服务，而应该在componentDidMount这样的生命周期方法中进行调用。否则，您的应用程序将在每次反应运行渲染时发出大量请求（默认情况下，每次输入支持组件或本地状态更改）
2. 如果要在render方法中访问类似的东西，则需要将其置于状态。所以在你的回调函数中，你将做this.setState({titles: titles})而不是返回标题。在您的渲染方法中，您将能够通过this.state.titles访问它。

我想理解你的问题的关键是，如果你想在渲染中访问一些数据并在每次数据更改时更新它，它必须来自组件状态或道具

Answer 2

当你深入研究JavaScript中的回调和Promise时，我们现在谈论它的异步性质。

异步操作的结果是回调。

Promise是一个包装操作的对象，并在该操作完成时通知我们。它似乎与回调相似，但是它没有提供回调，而是有自己的方法，您可以通过这些方法告诉承诺当它成功或失败时会发生什么。

在我们需要继续进行另一个操作之前，了解异步操作可能无法为我们提供结果，如果我们必须编写第二个异步操作的代码，但是那个异步操作的结果取决于第一个的结果，会发生什么？异步操作？

我们会在回调中创建一个回调，如下所示：

request('http://www.example.com', function (firstError, firstResponse, firstBody) {
    if(firstError){
        // Handle error.
    }
    else {
        request(`http://www.example.com/${firstBody.someValue}`, function (secondError, secondResponse, secondBody) {
            if(secondError){
                // Handle error.
            }
            else {
                // Use secondBody for something
            }
        });
    }
});

上面的例子可以通过不断增长的应用程序变得非常毛茸茸和令人讨厌，它会导致所谓的回调地狱。

承诺可以缓解回调地狱。因此，不是在回调内部的回调中嵌套回调，而是将.then()调用链接在一起，使其更易读，更容易理解。每个.then()应该返回一个新的Promise或只是一个值或对象将传递给链中的下一个.then()。

因此，采用上面的凌乱示例，并添加一个用于处理http请求的axios库，使用Promise的代码如下所示：

const axios = require(‘axios’);
axios.get(‘http://www.somepage.com')
.then(function (response) { // Reponse being the result of the first request
    // Returns another promise to the next .then(..) in the chain
    return axios.get(`http://www.somepage.com/${response.someValue}`);
})
.then(function response { // Reponse being the result of the second request
    // Handle response
})
.catch(function (error) {
    // Handle error.
});