반응중인 Firebase 데이터 렌더링

Question

Firebase 데이터를 HomeFeed 구성 요소로 렌더링하려고합니다. componentDidMount 메서드에서 상태를 업데이트합니다. 아래 보이는 모양을 볼 수 있습니다. 그것은 배열입니다. 지도 함수를 사용하여 맵핑해야합니까? "제목", "링크", "유형"등과 같은 특정 정보에 액세스하려면 어떻게해야합니까?

고맙습니다. 당신이 setState를 사용할 때 너무 오래 (당신이 shouldComponentUpdate 말하자면,이 동작을 수정하지 않는 한) state이 변경 될 때마다

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 실행할 제대로 구성 요소는 자동으로 할 때의 상태 변경을 업데이트합니다.

배열을 render이 이해하는 것으로 바꾸는 방법을 구체적으로 묻는다면, 예, map은 매우 일반적인 방법입니다. 당신은 기본적으로 더 JSX의 내부에 자바 스크립트 표현 의 내부 JSX를 삽입하고 있기 때문에 중괄호 ea.someProperty 포장해야

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

참고 : 이렇게 뭔가를 조회 할 수 있습니다. 이런 종류의 중첩 된 JSX/Expression/JSX 구조는 React I 'm afraid에서 편안하게 처리해야합니다. 내가 대답 한 경우

More about array.map