React - Redux - this.props.fetch.map 不是函数

Question

当我尝试通过 ma​​pStateToProps 将数据传递到我的组件时，我收到错误 this.props.fetch.map is not a function。如果我控制台徽标我的 Action 我得到一个 Object 。我不知道该怎么做将这个对象作为数组传递。有人可以帮助我吗？

这是我的组件 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(){

        return _.map(this.props.fetch.trabalhos ,() => {

            return(

                <li key={this.props.fetch.trabalhos.miristica.id}>
                    <img src={this.props.fetch.trabalhos.miristica.img} /> 
                    <p>{this.props.fetch.trabalhos.miristica.descricao}</p>
                    <p>{this.props.fetch.trabalhos.miristica.nome}</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';

var firebase = require("firebase/app");
require("firebase/database");

var config = {
apiKey: "AIzaSyDi3f9pSGH833Hq3TBzibCK1SbPOheiGmE",
authDomain: "portofoliofirebase.firebaseapp.com",
databaseURL: "https://portofoliofirebase.firebaseio.com",
storageBucket: "portofoliofirebase.appspot.com",
messagingSenderId: "656734450041"
};

firebase.initializeApp(config);

var data = firebase.database().ref();

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

这是我的减速器 fetch_reducer.js

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

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

return state;
}

这是我的 rootReducer index.jx

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

const rootReducer = combineReducers({

fetch: fetchReducer

});

export default rootReducer;

存储 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'));

谢谢！

Answer 1

我猜 Redux 存储的初始状态在你的情况下是空的。我的意思是 render 在任何 reducer 触发之前触发，所以 this.props.fetch === {}

请在createStore指定preloadedState。

即替换（在商店 index.js）

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

与

const store = createStore(reducers, {fetch:[]}, applyMiddleware(reduxThunk))