React路由器和Redux - 初始加載數據

Question

我在網站上看到了很多關於我遇到的問題的問題和解答。

我有通常與React，React路由器和Redux設置。我的頂級組件如下。

// Imports 

const reducers = { 
    main: baseReducer, 
    form: formReducer, 
}; 

const reducer = combineReducers(reducers); 

const store = createStore(
    reducer, 
    applyMiddleware(thunk), 
); 

store.dispatch(actions.auth.setCurrentUser()); 
// store.dispatch(actions.api.fetchLineup()); 

ReactDOM.render(
    <Provider store={store}> 
    <HashRouter> 
     <App /> 
    </HashRouter> 
    </Provider> 
    , 
    document.getElementById('root') 
); 

裏面我App.jsx我有以下代碼：

import React from 'react'; 
import Main from './Main'; 

const App =() => (
    <div> 
    <Main /> 
    </div> 
); 

export default App; 

我Main.jsx

import React from 'react'; 
import { Switch, Route } from 'react-router-dom'; 
import GroupingContainer from '../containers/Grouping'; 
import HomeContainer from '../containers/Home'; 

const Main =() => (
    <main> 
    <Switch> 
     <Route exact path='/' component={HomeContainer} /> 
     <Route path='/groupings/:id' component={GroupingContainer} /> 
    </Switch> 
    </main> 
); 

export default Main; 

最後我有我的Grouping.jsx和GroupingContainer.jsx

import React, { Component } from 'react'; 

function loadGrouping(props, groupingId) { 
    const grouping = props.main.groupings.find(
    (g) => g.id === groupingId 
); 
    if (!grouping) { 
    props.dispatch(api.fetchGrouping(groupingId)); 
    } 
} 

class Grouping extends Component { 
    constructor(props) { 
    super(props); 
    loadGrouping(props, props.groupingId); 
    } 

    componentWillReceiveProps(nextProps) { 
    console.log('Next: ', nextProps); 
    if (nextProps.match && nextProps.match.params.id !== this.props.match.params.id) { 
     loadGrouping(this.props, nextProps.groupingId); 
    } 
    } 

    render() { 
    const grouping = this.props.main.groupings.find(
     (lg) => lg.id === this.props.groupingId 
    ); 
    return (
     <div> 
     <h1>{grouping.name}</h1> 
     </div> 
    ); 
    } 
} 

export default Grouping; 

GroupingCon tainer.jsx

import { connect } from 'react-redux'; 
import Grouping from '../components/Grouping'; 

const mapStateToProps = (state, ownProps) => { 
    return { 
    groupingId: parseInt(ownProps.match.params.id, 10), 
    ...state, 
    }; 
}; 

const mapDispatchToProps = (dispatch) => ({ 
    dispatch, 
}); 

const GroupingContainer = connect(
    mapStateToProps, 
    mapDispatchToProps, 
)(Grouping); 

export default GroupingContainer; 

請求後它觸發另一個動作，其將所述返回分組到商店並進入我有2個問題組state.main.groups

的陣列。當我從根路徑瀏覽到的分組中的一個，下面的流程：

http://localhost:3000 -> http://localhost:3000/#/groupings/19 

我收到消息：Uncaught TypeError: Cannot read property 'name' of undefined一個短暫的第二直到API請求完成並填充{grouping.name}並且當我做一個完整的刷新頁面上的分組網址http://localhost:3000/#/groupings/19應用程序根本不加載，並給它們相同Uncaught TypeError: Cannot read property 'name' of undefined

我一直在使用React約2個月，並且真正開始在組件加載中使用API​​請求。我無法正確地找出正確放置API請求的位置，以防止在視圖渲染完成並錯誤檢出之前進行渲染。

任何幫助，將不勝感激！

謝謝！

Answer 1

嘗試像這樣更改分組組件的呈現。

render() { 
    const grouping = this.props.main.groupings.find(
     (lg) => lg.id === this.props.groupingId 
    ); 
    return (
     <div> 
     <h1>{grouping ? grouping.name : ""}</h1> 
     </div> 
    ); 
    }