使用 jquery 在 React 中呈现 RSS 提要 (XML)，为什么从提要解析的 object 值看起来是空的？

Question

我正在尝试从提要解析的项目中呈现标题，只是为了测试。它总是给我一条错误消息，告诉我标题未定义或为空（尝试对代码进行多次小修改）。但是，getNews() 方法似乎将 30 objects 设置为预期的状态。我只是无法从中呈现任何值。谁能看出我的方法有什么问题？查询有问题吗？

class App extends Component {

    constructor(props) { 
        super(props);
        this.state = { news: [] }; 
        this.getNews = this.getNews.bind(this); 
    }

    componentDidMount() {
        this.getNews();
    }

    getNews() {

        $.get("https://www.hs.fi/rss/tuoreimmat.xml",function(data) {    

            var $xml = $(data);   
            var items = [];

            $xml.find("item").each(function() {
                var $this = $(this),
                    item = {
                        title: $this.find("title").text(),
                        link: $this.find("link").text(),
                        description: $this.find("description").text(),
                        pubDate: $this.find("pubDate").text(),
                    }

                items.push(item);

            }.bind(this));   

            this.setState({ news: items });

        }.bind(this)); 
    }

    render() { 

        var newsItem = this.state.news[1]; 
        var title = newsItem.title;

        return (
            <div className="App">
              <header className="App-header">
                <h1 className="App-title">News</h1>
              </header>
              <div className="App-feeds">
              </div>
              <div className="panel-list">{title}</div>
            </div>
        );
    }
}

Answer 1

问题在于 ajax 调用和呈现的工作方式。当您执行程序时，React 会尝试直接渲染组件，因此 ajax get 调用尚未完成，状态变量仍为空。一旦你收到你的回复，你就用你所有的新闻更新状态，然后 React 更新视图。但是当它启动时，在渲染中你尝试访问 this.state.news[1]，但是 this.state.news 仍然是空的，所以你得到 undefined.

一个小补丁只是为了让你检查它是用...

初始化状态

this.state = { news: [{},{}] };

...所以现在 this.state.news[1] 存在，您将看到 ajax 调用完成后如何刷新。

我想最终目的是显示所有标题或所有新闻等。所以你会遇到这个问题，因为在渲染中你必须 "loop" 通过 [= 的所有值13=]（我猜是使用 map 函数），当它为空时它不会失败。

在这里，您使用补丁修改了代码以查看它是否正常工作。看一看，因为我试着清理了一下...

class App extends React.Component {

    constructor(props) { 
        super(props);
        this.state = { news: [{},{}] };
    }

    componentDidMount() {
        this.getNews();
    }

    getNews() {

        $.get("https://www.hs.fi/rss/tuoreimmat.xml",function(data) {    

            var $xml = $(data);   
            var items = [];

            $xml.find("item").each(function() {
                var $this = $(this);
                items.push({
                    title: $this.find("title").text(),
                    link: $this.find("link").text(),
                    description: $this.find("description").text(),
                    pubDate: $this.find("pubDate").text(),
                });
            });

            this.setState({ news: items });

        }.bind(this),'xml');    
    }

    render() { 
        return (
            <div className="App">
              <header className="App-header">
                <h1 className="App-title">News</h1>
              </header>
              <div className="App-feeds">
              </div>
              <div className="panel-list">{this.state.news[1].title}</div>
            </div>
        );
    }
}

和对应的fiddle：https://fiddle.jshell.net/rigobauer/x1ty26bq/

使用 jquery 在 React 中呈现 RSS 提要 (XML)，为什么从提要解析的 object 值看起来是空的？

Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?

javascript

xml

rss

jquery

reactjs