[英]componentDidMount is not called
我正在调用ajax请求this.props.getPostListData(this.props.lang)
并收到错误。 然后我发现应该归咎于componentDidMount。
我componentDidMount
不叫News.jsx
成分,当我把它替换到componentWillMount
- Ajax请求被调用。
我使用Redux和React Router v4
class News extends Component {
componentDidMount() {
this.props.getPostListData(this.props.lang);
}
props: {
urlPrefix: string,
lang: string,
postList: PostListData,
getPostListData: Function
};
render() {
const { postList, urlPrefix } = this.props;
return (
<section className={'news'}>
...
<NewsCards posts={postList} urlPrefix={urlPrefix} />
</section>
);
}
}
const mapStateToProps = state => {
const urlPrefix = getPrefix(state.locale);
const postList = state.postlistData ? state.postlistData : [];
const lang = getLang(state.locale);
return { postList, lang, urlPrefix };
};
const mapDispatchToProps = (dispatch: Function) => ({
getPostListData(locale) {
dispatch(getPostList(locale));
}
});
export default connect(mapStateToProps, mapDispatchToProps)(News);
const Routes = ({ urlPrefix }: { urlPrefix: string }) => (
<BrowserRouter>
<div className="app">
<Route render={props => <Header urlPrefix={urlPrefix} {...props} />} />
<Switch>
<RootRouter exact
path={'/:lang(en|ru)?'} urlPrefix={urlPrefix} component={Landing} />
<Route exact path={'/:lang(en|ru)?/news'} component={News} />
<Route component={FourOhFour} />
</Switch>
<Footer />
</div>
</BrowserRouter>
);
const mapStateToProps = state => ({ urlPrefix: getPrefix(state.locale) });
export default connect(mapStateToProps)(Routes);
如果我更换NewsCards
组件:
<NewsCards posts={postList} urlPrefix={urlPrefix} />
至
<pre><code>{JSON.stringify(postList)}</code></pre>
一切正常。 因此问题出在NewsCards组件中。 我需要更精确地检查它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.