陣營 - 終極版 - this.props.fetch.map不是一個函數

Question

即時得到錯誤this.props.fetch.map不是一個函數，當我嘗試通過mapStateToProps我的分量通過我的數據。如果我的控制檯標識我的動作即時獲取對象。我不知道該怎麼做將該對象作爲數組傳遞。可以幫助我嗎？

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

這是我的根減速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商店的初始狀態是空的。我的意思是在任何還原劑着火之前發生火災，所以this.props.fetch === {}

請指定preloadedState在createStore。

I.e.更換（在商店index.js）

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

與

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