Flux RSS (XML) dans Réagir avec jquery, pourquoi les valeurs d'objet analysées dans le flux semblent-elles vides?

Question

J'essaie de rendre le titre d'un élément analysé à partir du flux juste pour un test. Il me donne toujours soit un message d'erreur me disant que le titre est indéfini ou nul (essayé plusieurs petites modifications au code). Cependant, la méthode getNews() semble définir 30 objets à l'état comme il est censé le faire. Je suis juste incapable de rendre des valeurs d'eux. Quelqu'un peut-il voir ce qui ne va pas avec mon approche? Y a-t-il un problème avec la requête?

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

Le problème est de savoir comment fonctionne l'appel ajax et le rendu. Lorsque vous exécutez le programme, React essaie de rendre le composant directement, de sorte que l'appel ajax get n'a pas été terminé et que la variable d'état est toujours vide. Une fois que vous recevez votre réponse, vous mettez à jour l'état avec toutes vos nouvelles et Réactualisez la vue. Mais quand il commence, dans le rendu, vous essayez d'accéder this.state.news[1], mais this.state.news est toujours un vide vide, de sorte que vous obtenez le undefined.

Un petit morceau juste pour vous permettre de le vérifier est d'initialiser l'état avec ...

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

... maintenant this.state.news[1] existe et vous verrez comment est actualisée lorsque l'appel ajax est terminé. Je suppose que le but final est de montrer tous les titres, ou toutes les nouvelles, etc Donc vous voulez avoir ce problème, parce que dans le rendu, vous devrez "boucler" toutes les valeurs de this.state.news (avec le map fonction, je suppose), et quand il est vide, il n'échouera pas.

Ici vous avez votre code modifié avec le patch pour le voir fonctionner. Avoir un look parce que je l'ai essayé de nettoyer un peu ...

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> 
     ); 
    } 
} 

et le violon correspondant: https://fiddle.jshell.net/rigobauer/x1ty26bq/