React-Redux - 从 Firebase 获取数据

Question

我正在尝试使用 Firebase 来捕获一些数据并在我的网络应用程序上显示，但我不知道该怎么做。我正在使用 reduxThunk。 我收到错误id is not defined。 这是我的组件

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

这是我的行动

actions/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;
}

这是我的 Reducer index.js

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

const rootReducer = combineReducers({

fetch: fetchReducer

});

export default rootReducer;

Answer 1

您在没有任何参数的情况下调用this.renderList()，所以id 在<li className="list-group-item" key={id}> 确实是is not defined。我想也许你想使用this.props.payload.data.map(this.renderList)？