React Router 和 Redux - 初始加载数据
React Router and Redux - Data on initial load
我在网站上查看了很多关于我遇到的问题的问题和答案。
我有 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
我收到消息:Uncaught TypeError: Cannot read property 'name' of undefined
一小会儿,直到 API 请求完成并填充 {grouping.name}
并且当我完全刷新分组上的页面时 URL http://localhost:3000/#/groupings/19
应用程序根本不加载并给他们相同的 Uncaught TypeError: Cannot read property 'name' of undefined
我已经使用 React 大约 2 个月了,并且真正开始在组件加载上使用 API 请求。我无法真正弄清楚在哪里正确放置 API 请求以防止视图渲染在完成之前出现并出错。
如有任何帮助,我们将不胜感激!
谢谢!
尝试像这样更改分组组件的渲染。
render() {
const grouping = this.props.main.groupings.find(
(lg) => lg.id === this.props.groupingId
);
return (
<div>
<h1>{grouping ? grouping.name : ""}</h1>
</div>
);
}
我在网站上查看了很多关于我遇到的问题的问题和答案。
我有 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
我收到消息:Uncaught TypeError: Cannot read property 'name' of undefined
一小会儿,直到 API 请求完成并填充 {grouping.name}
并且当我完全刷新分组上的页面时 URL http://localhost:3000/#/groupings/19
应用程序根本不加载并给他们相同的 Uncaught TypeError: Cannot read property 'name' of undefined
我已经使用 React 大约 2 个月了,并且真正开始在组件加载上使用 API 请求。我无法真正弄清楚在哪里正确放置 API 请求以防止视图渲染在完成之前出现并出错。
如有任何帮助,我们将不胜感激!
谢谢!
尝试像这样更改分组组件的渲染。
render() {
const grouping = this.props.main.groupings.find(
(lg) => lg.id === this.props.groupingId
);
return (
<div>
<h1>{grouping ? grouping.name : ""}</h1>
</div>
);
}