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获取数据

回答

相关问题