Question

我试图从Feed中解析的项目中呈现标题，仅用于测试。它总是要么给我一个错误消息，告诉我标题是未定义的或null（尝试对代码进行多次小修改）。但是，getNews（）方法似乎将30个对象设置为它应该的状态。我只是无法从它们渲染任何值。任何人都可以看到我的方法有什么问题吗？查询有问题吗？

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调用后如何刷新。

我认为最终目的是显示所有标题或所有新闻等。所以你想要有这个问题，因为在渲染中你必须“循环”this.state.news的所有值（使用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>
        );
    }
}

相应的小提琴：https://fiddle.jshell.net/rigobauer/x1ty26bq/

使用jquery在React中渲染RSS提要（XML），为什么从feed解析的对象值看起来是空的？

1 个答案: