javascript - componentDidMount 未被调用

Question

我正在调用 ajax 请求 this.props.getPostListData(this.props.lang) 并出现错误。然后我发现它是 componentDidMount 的罪魁祸首。
我的 componentDidMount 未在 News.jsx 组件中调用，当我将其替换为 componentWillMount - 调用了 ajax 请求。
我使用 Redux 和 React Router v4

新闻.jsx

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);

路由.jsx

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);

Answer 1

如果我替换 NewsCards 组件:

<NewsCards posts={postList} urlPrefix={urlPrefix} />

到

<pre><code>{JSON.stringify(postList)}</code></pre>

一切正常。所以问题出在 NewsCards 组件中。我需要更精确地检查它。