Question

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

对于子组件的初始更新，我在componentWillMount中调用了一个动作，因为路由参数是我检测用户点击了哪个链接的唯一来源.I＆＃39 ; m根据reactjs官方文档中url.But中已更改的componentWillReceiveProps调用page_id中的API，提到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);

Answer 1

这看起来是可以接受的做法。请注意，有时您可以在初始渲染中使用componentWillReceiveProps获得意外结果，但除此之外，这看起来很好。

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

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

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

1 个答案: