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;

My 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

我收到消息：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个月了，并且已经真正开始在Component加载上使用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>
    );
  }

React Router和Redux - 初始加载数据

1 个答案: