是否在componentWillReceiveProps中调用API对路由器参数的更改是否正确？

Question

我有一组组件，其中每个组件都有不同的数据由服务器提供。因此，当用户点击组件4时，应该有一个API调用并获取有关所单击链接的信息。

对于子组件的初始更新，我在componentWillMount中调用一个动作，因为route参数是我检测用户点击了哪个链接的唯一来源。我在componentWillReceiveProps中调用API基于改变了url中的page_id。但是在reactjs的官方文档中，提到ComponentDidMount是进行异步调用的正确位置。

我已经浏览了很多关于此的博客和教程。遗憾的是，我找不到最好的解决方案。请指导我。这是我的父组件

  import React from 'react';
  import {CommentBox} from './CommentBox';
  import SuggestionBox from './SuggestionBox';
  import ProductBlog from './ProductBlog';
  import FeaturesList from './FeaturesList';
  import ContactForm from './ContactForm';
  import WebVRSuggestion from './WebVRSuggestion';
  import ModelFooter from './ModelFooter';
  import WebVR from './WebVR';
  import {connect} from 'react-redux';
  import {getProductInfo,getSuggestions} from '../actions/productActions';
  import {getComments} from '../actions/commentActions';

  class SmartProduct extends React.Component{

  //To execute the parent before the child componentWillMount(){}
  componentWillMount(){
    // if(this.props.productInfo === undefined || this.props.productInfo.length == 0){
    this.props.getProductInfo(this.props.page,this.props.pageId);
    this.props.getComments(this.props.page,this.props.pageId);
    this.props.getSuggestions(this.props.page,this.props.pageId);
  // }
  }

  componentWillReceiveProps(nextProps){
     if(nextProps.page !== this.props.page || nextProps.pageId !== this.props.pageId){
         this.props.getProductInfo(nextProps.page,nextProps.pageId);
         this.props.getComments(nextProps.page,nextProps.pageId);
         this.props.getSuggestions(nextProps.page,nextProps.pageId);
       }
  }

  render(){
      return (
        <div className="container-fluid bg-darkGrey ">
          <div className="row mx-0 py-3 bgTheme">
            {/* <h3>{this.props.page}</h3>
            <h3>{this.props.pageId}</h3>*/}
            <div className="col-sm-3 col-md-3 col-lg-3 mb-2">
              <CommentBox page={this.props.page}
              pageId={this.props.pageId}
              comments={this.props.comments}
               />
            </div>
            <div className="col-sm-6 col-md-6 col-lg-6 productWrapper">
              <div className="productVR rounded" >
              <WebVR width={625} height={405} />
               {/* <WebVR /> <div id="container123"></div>
                <div id="container123" style={containerStyle}></div>
               */}
              </div>
              <ModelFooter page={this.props.page}
                pageId={this.props.pageId}
                productInfo={this.props.productInfo}
               />
            </div>
            <div className="col-sm-3 col-md-3 col-lg-3 ">
              <SuggestionBox
              page={this.props.page}
              pageId={this.props.pageId}
              suggestions={this.props.suggestions}
              />
            </div>
          </div>
          <div className="row mx-0">
            <div className="col-sm-3 col-md-3 col-lg-3">
               <ProductBlog page={this.props.page}
               pageId={this.props.pageId}
                 productInfo={this.props.productInfo}
                />
            </div>
            <div className="col-sm-6 col-md-6 col-lg-6 productFeatures rounded">
                <FeaturesList page={this.props.page}
                pageId={this.props.pageId}
                productInfo={this.props.productInfo}
                />
            </div>
            <div className="col-sm-3 col-md-3 col-lg-3 rounded">
              <ContactForm page={this.props.page} pageId={this.props.pageId} />
            </div>
          </div>
          <div className="row mx-0 mt-4 mb-2">
            <div className="col-sm-12 col-md-12 col-lg-12 bg-info py-2 rounded text-center">
              <h5 className="text-white mb-0">You Might Also Like These</h5>
            </div>
          </div>
          <WebVRSuggestion
          page={this.props.page}
          pageId={this.props.pageId}
          suggestions={this.props.suggestions}
          />
        </div>
      );
    }
  }

  function mapStateToProps(state){
    const {isLoading}=state.productloader
    return {
      productInfo:state.products.productsInfo,
      comments:state.comments.comments,
      suggestions:state.products.suggestions

    }
  }

  export default connect(mapStateToProps,{getProductInfo,getComments,getSuggestions})(SmartProduct);