React-Redux - Firebase에서 데이터를 가져 오는 중

Question

Firebase를 사용하여 일부 데이터를 잡아 내 웹 앱에 표시하려하고 있지만 어떻게하는지 이해하지 못합니다. 나는 reduxThunk를 사용하고 있습니다. 오류가 발생했습니다. ID가 정의되지 않았습니다.. 이 내 구성 요소

이 내 작업

행동이다

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../actions'; 


class Trabalhos extends Component { 

    componentWillMount(){ 
     this.props.fetchData(); 
    } 

    renderList({id,tec,title}){ 
     return(
      <li className="list-group-item" key={id}> 
       <p>{title}</p> 
       <p>{tec}</p> 
      </li> 
     ) 
    } 

    render(){ 
    return (

     <div> 
      <div className="trabalhos"> 
       <div className="trabalhos_caixa"> 
        <div className="row"> 
         <div className="col-xs-12"> 
          <ul className="no_pad"> 
           {this.renderList()} 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    ); 
} 

} 


function mapStateToProps(state){ 

return { fetch: state.fetch }; 
} 


export default connect(mapStateToProps, actions)(Trabalhos); 

trabalhos.js /하는 index.js

import Firebase from 'firebase'; 
import { FETCH_DATA } from './types'; 

const Data = new Firebase('https://portofoliofirebase.firebaseio.com'); 

export function fetchData(){ 
return dispatch => { 
    Data.on('value', snapshot => { 
     dispatch({ 
      type: FETCH_DATA, 
      payload: snapshot.val() 
     }); 
    }); 
} 

} 

이 내 하는 index.js입니다

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import { Router, browserHistory } from 'react-router'; 
import reducers from './reducers'; 
import routes from './routes'; 
import * as **firebase** from 'firebase'; 
import **reduxThunk** from 'redux-thunk' 

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore); 
const store = createStoreWithMiddleware(reducers); 


ReactDOM.render(
<Provider store={store}> 
<Router history={browserHistory} routes={routes} /> 
</Provider> 
, document.querySelector('.container')); 

이이 내 감속기입니다 하는 index.js

import { combineReducers } from 'redux'; 
import fetchReducer from './fetch_reducer'; 

const rootReducer = combineReducers({ 

fetch: fetchReducer 

}); 

export default rootReducer; 

Answer 1

당신은 너무 id<li className="list-group-item" key={id}>에서 인수없이 this.renderList()를 호출 내 fetch_reducer.js

import { FETCH_DATA } from '../actions/types'; 

export default function(state = [], action) { 
switch(action.type){ 
    case FETCH_DATA: 
     return action.payload.data;  
} 

return state; 
} 

입니다 참으로 is not defined. 아마도 this.props.payload.data.map(this.renderList)을 사용하고 싶습니까?