在React中使用jQuery呈现RSS源（XML），为什么从源解析的对象值看起来是空的？

Question

我试图从一个项目中解析出来的项目标题只是为了一个测试。它总是要么给我一个错误消息，告诉我标题是未定义的或为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/