React Router 和 Redux - 初始加载数据

Posted 2023-02-22

【中文标题】React Router 和 Redux - 初始加载数据

【英文标题】：React Router and Redux - Data on initial load

【发布时间】：2017-09-28 09:39:49

【问题描述】：

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

我使用 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 请求以防止视图在完成之前呈现并出错。

任何帮助将不胜感激！

谢谢！

【问题讨论】：

看这篇文章可能会有所帮助***.com/questions/39381378/…我问了一个类似的问题并得到了非常酷的回应

【参考方案1】：

尝试像这样改变分组组件的渲染。

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

【讨论】：

天哪，谢谢，这也是一个愚蠢的忽视。你节省了一些挫败感。谢谢！