React Router 和 Redux - 初始加载数据

Question

我在网站上查看了很多关于我遇到的问题的问题和答案。

我使用 React、React Router 和 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;

GroupingContainer.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;

在请求之后，它会触发另一个操作，将返回的分组添加到存储中并添加到组数组state.main.groups

我有两个问题。当我从根路径浏览到其中一个分组时，以下流程：

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

在 API 请求完成并填充 {grouping.name} 之前，我会收到消息：Uncaught TypeError: Cannot read property 'name' of undefined，当我在分组 URL 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>
    );
  }