0

我有一组组件，其中每个组件都有服务器提供的不同数据。因此，当用户点击组件 4 时，应该有一个 API 调用并获取有关点击链接的信息。 在此处输入图像描述

对于子组件的初始更新，我正在调用一个动作，componentWillMount因为路由参数是我检测用户单击哪个链接的唯一来源。我根据更改调用componentWillReceivePropsAPI page_idurl。但是在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);
4

1 回答 1

0

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

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

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

于 2018-02-14T06:51:15.933 回答