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

Question

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

对于子组件的初始更新，我在 componentWillMount 中调用一个操作，因为路由参数是我检测哪个 link 被 [点击的唯一来源=23=]是在reactjs官方文档中url.But里改成page_id的基础上调用componentWillReceiveProps里的API，写成ComponentDidMount 是进行异步调用的正确位置。

我浏览了很多关于 this.Unfortunately 的博客和教程，我找不到最好的 solution.Please 指导我 this.Here 是我的父组件

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

Answer 1

这看起来是一种可以接受的做法。请注意，您有时会在初始渲染时使用 componentWillReceiveProps 获得意想不到的结果，但除此之外这看起来还不错。

但是，如果您真的希望您的代码更具确定性，您可以为您需要的每个路由创建更高级别的组件，并在 componentDidMount 中调用您的异步数据函数。这样您就可以更轻松地在路由之间缓存数据。

*编辑：在仔细查看您的代码后，更高级别的组件可能不适用于您的情况，因为我猜您将拥有无法确定的产品数量，这些产品可以由同一组件呈现。 ComponentDidMount 是异步调用的首选方法，因为它只被调用一次，而 componentWillReceiveProps 被调用得相当频繁，如果你不小心，你最终可能会发送很多不必要的异步请求。看起来你只是在路由发生变化时才调用你的异步函数，所以你不应该遇到这个问题。

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

Is making a call to the API in the componentWillReceiveProps on router parameter change is correct or not?

components

reactjs

redux

react-router-v4

dynamic-routing