React-Redux - 從Firebase獲取數據

我試圖使用Firebase捕獲一些數據並顯示在我的網絡應用程序中，但我不知道如何去做。我正在使用reduxThunk。我得到錯誤ID沒有定義。這是我的組件React-Redux - 從Firebase獲取數據

trabalhos.js

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

這是我行動

動作/ 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'));

這是我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; 
}

這是我減速index.js

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

const rootReducer = combineReducers({ 

fetch: fetchReducer 

}); 

export default rootReducer;

來源

2016-12-14 Hugo Seleiro

Trabalhos組件獲取其道具在哪裏設置？你打算將它作爲一個連接組件嗎？ –

我已更新！ –

@Hseleiro錯誤來自哪裏？你的Firebase應用程序工作嗎？從文檔看來，您必須在Firebase處於活動狀態之前運行initializeApp。另外，你必須在'firebase.database（）。ref（）'上調用'.on（）'來監聽變化。我不認爲你可以直接在firebase實例上調用'.on（）'（下面的鏈接）。 https://firebase.google.com/docs/reference/js/firebase https://firebase.google.com/docs/database/web/read-and-write – Shane

要調用this.renderList()不帶任何參數，所以id在<li className="list-group-item" key={id}>確實是is not defined。我想也許你想用this.props.payload.data.map(this.renderList)？

來源

2016-12-14 23:38:17

它不工作:(！謝謝你的幫助。 –

'this.props.payload.data.map（this.renderList）'was對你正在嘗試做的事情有一種預感，你應該用正確的道具名稱替換。 –

感謝利奧，但它不工作，即時嘗試使用_ lodash –

React-Redux - 從Firebase獲取數據

回答

相關問題