爲什麼從Redux中獲取的道具沒有定義

-1

我使用mern.io的入門模板。當我嘗試運行下面的代碼我得到的錯誤：「的ReferenceError：道具沒有定義」爲什麼從Redux中獲取的道具沒有定義

EventDetailPage.js：

import React, {PropTypes} from 'react'; 
import {connect} from 'react-redux'; 

// Import Actions 
import {fetchEvent} from '../../EventActions'; 

// Import Selectors 
import {getEvent} from '../../EventReducer'; 

function EventDetailPage(props) { 
    return (
    <div> 
     <h3>{props.event.name}</h3> 
    </div> 
    // null 
); 
} 

// Actions required to provide data for this component to render in server side. 
EventDetailPage.need = [params => { 
    return fetchEvent(params.id); 
    } 
]; 

// Retrieve data from store as props 
function mapStateToProps(state, props) { 
    return { 
    event: getEvent(state, props.params.id) 
    }; 
} 

export default connect(mapStateToProps)(EventDetailPage);

fetchEvent（API調用工作）：

export function fetchEvent(id) { 
    return (dispatch) => { 
    return callApi(`events/${id}`).then(res => dispatch(addEvent(res.event))); 
    }; 
}

getEvent：

export const getEvent = (state, id) => state.events.data.filter(event => event.id === id)[0];

routes.js：

<Route 
    path="/events/:name-:id" 
    getComponent={(nextState, cb) => { 
    require.ensure([], require => { 
     cb(null, require('./modules/Event/pages/EventDetailPage/EventDetailPage').default); 
    }); 
    }} 
/>

來源

2017-06-03 Ruben Pauwels

這裏是調試的工作原理：

在有些情況下，你使用兩個地方的變量props：

 <h3>{props.event.name}</h3>

，這表明你要測試，以單獨調用EventDetailPage(...) （單元測試）來檢查此功能是否正常工作，並且

function mapStateToProps(state, props) { 
    return { 
    event: getEvent(state, props.params.id)

，如果它不起作用將意味着Redux API被破壞 - 它不是 - ，但要確保您可以在返回之前嘗試console.log(props)。

從我可以閱讀的代碼中，我認爲它沒有在您的代碼片段中複製的地方失敗，但由於您沒有提供完整的回溯（至少文件和行號），所以很難知道。

來源

2017-06-03 17:00:12 JulienD

爲什麼從Redux中獲取的道具沒有定義

回答

相關問題