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问题在这里：

render()方法必须返回有效的JSX。您应该在render()等生命周期方法中进行调用，而不是在componentDidMount中调用外部服务。否则，每次反应运行渲染时，您的应用程序都会发出大量请求（默认情况下，每次输入支持组件或本地状态发生变化）
如果要在渲染方法中访问类似的内容，则需要将其置于状态。因此，在您的回调函数中，您将执行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
            }
        });
    }
});

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

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

因此，采用上面的凌乱示例，并添加axios库来处理http请求，使用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.
});

了解ReactJS中的承诺和回调

2 个答案: