Rendering Firebase Daten in Reaktion

Question

Ich suche ein paar Feuerbasis Daten an die HomeFeed Komponente zu machen. Ich aktualisiere den Status in der ComponentDidMount-Methode. Sie können sehen, wie das unten aussieht. Es ist ein Array. Soll ich das nur mit der Kartenfunktion abbilden? Wie kann ich auf die spezifischen Informationen wie "title", "link", "type" usw. zugreifen, um es rendern zu können?

Vielen Dank!

var React = require('react'); 
var Rebase = require('re-base'); 
var base = Rebase.createClass("https://nimbus-8ea70.firebaseio.com/"); 

// TODO: Render Firebase data to screen. 

// Home 
// <Home /> 
var HomeContainer = React.createClass({ 
    render : function() { 
     return (
      <div className="homeContainer"> 
       <HomeFeed /> 
      </div> 
     ); 
    } 
}); 

// Home Feed 
// <HomeFeed /> 
var HomeFeed = React.createClass({ 
    componentDidMount: function() { 
     base.fetch('article', { 
      context: this, 
      asArray: true, 
      then(data){ 
       console.log(data); 
       this.setState({ 
        feed: data 
       }) 
      } 
     }); 
    }, 
    getInitialState: function() { 
     return { 
      feed: [] 
     } 
    }, 
    render : function() { 
     return (
      <div className="homeFeed"> 
       {/* Use map function here? */} 
      </div> 
     ); 
    } 
}); 

module.exports = HomeContainer; 

Answer 1

render wird ausgeführt, wenn state geändert wurde (es sei denn, Sie dieses Verhalten mit ändern, sagen wir, shouldComponentUpdate) so lange, wie Sie setState richtig Ihre Komponente verwenden, wird automatisch aktualisiert, wenn sein Zustand ändert.

Wenn Sie speziell fragen, wie man ein Array in etwas verwandelt, das render versteht, dann ist ja map eine sehr übliche Möglichkeit, das zu tun. Es könnte wie folgt aussehen:

render : function() { 
    return (
     <div className="homeFeed"> 
      {this.state.feed.map(function(ea){ 
       return <div>{ea.someProperty}</div> 
      })} 
     </div> 
    ); 
} 

Beachten Sie, dass Sie haben ea.someProperty in geschweiften Klammern wickeln, weil Sie JSX im Grunde sind das Einfügen innerhalb eines JavaScript-Ausdruck innerhalb von noch mehr JSX. Diese Art verschachtelter JSX/Expression/JSX-Struktur ist etwas, mit dem Sie sich in React vertraut machen müssen, fürchte ich.

More about array.map