componentDidUpdate в редукционной форме

Question

Я новичок в реагировании на избыточность .. У меня есть форма избыточности, и данные отображаются по-разному в разных режимах; это означает, что поля ввода будут отключены во время режима просмотра и включены в режиме редактирования ... У меня проблемы с отображением всех данных при переключении режима из режима просмотра в режим редактирования. В режиме просмотра В форме у меня есть кнопка «РЕДАКТИРОВАТЬ ПРОДВИЖЕНИЕ» для переключения с «просмотра» на «редактирование» .. при переключении с «просмотра» на «редактирование» определенные данные не будут отображаться. Но этого не происходит, когда сначала используется режим «редактирования» ..

Код, соответствующий сценарию, приведен ниже ... Пожалуйста, помогите мне разобраться с этим.

 componentDidUpdate(prevProps, prevState) {

    console.log("this.state ", this.state);

    let passedPromoObject;
    const { promotion, basePackage, selectedBasePackage, products } = this.props;
    if (promotion.promo && promotion.promoLoading === false && JSON.stringify(promotion.promo) !== JSON.stringify(prevProps.promotion.promo) && !this.state.isSubmit) {
      // this.setState({
      //   startDate: new Date(promotion.promo.startDate),
      //   endDate: new Date(promotion.promo.endDate)
      // })

      if (basePackage.length !== 0) {
        this.props.promotionActions.getSelectedBasePackages();
      }



      let tagList = [];
      this.props.tags && this.props.tags.map((tag) => {
        promotion.promo.productTags.map((productTag) => {
          if (tag.id === productTag) {
            tagList.push({ value: tag.id, label: tag.tag })
          }
        })
      });

      //get product list on edit
      let tagIdList = [];
      tagList.map(tag => tagIdList.push(tag.label));
      if (tagList.length === 0) {
        promotionActions.getProductByType(promotion.promo.productType)
      } else {
        let data = {
          "tags": tagIdList,
          "typeId": promotion.promo.productType
        }
        promotionActions.getproductWithTypeAndTags(data)
      }



      passedPromoObject = {
        promotionCode: promotion.promo.promotionCode,
        promotionStartDate: moment(promotion.promo && promotion.promo.startDate).format(),
        promotionEndDate: moment(promotion.promo && promotion.promo.endDate).format(),
        productId: promotion.promo.productId,
        purchaseOptionId: promotion.promo.purchaseOptionId,
        redirectLink: promotion.promo.redirectUrl,
        voucherId: parseInt(promotion.promo.voucherId),
        imageURL: promotion.promo.bannerUrl,
        displayBanner: promotion.promo.bannerStatus,
        startDate: new Date(promotion.promo.startDate),
        endDate: new Date(promotion.promo.endDate),
        productType: promotion.promo.productType,
        tagsList: tagList      //when commented tags won't appear even in view or edit(directly)


      }
      if (selectedBasePackage && selectedBasePackage.length !== 0) {
        passedPromoObject.basePackageIdList = selectedBasePackage;

      }


      if (this.props.location && this.props.location.state && this.props.location.state.duplicate == true) {
        delete passedPromoObject.promotionCode
        this.props.initialize(passedPromoObject);
      }
      else {
        this.props.initialize(passedPromoObject);
      }


    }

    // console.log("this.state.isSubmit ", this.state.isSubmit);

    //should be refactored with the primary package API
    if (promotion.promo && promotion.promoLoading === false && !this.props.pathname.includes("createChannel") && !this.props.basePackageLoading && this.props.basePackage && JSON.stringify(selectedBasePackage) !== JSON.stringify(prevProps.selectedBasePackage) && !this.state.isSubmit) {
      const { promotion, basePackage, products } = this.props;
      let basePackageIdListRecieved = []
      promotion.promo && promotion.promo.basePackageIds && promotion.promo.basePackageIds.map((pk, index) => {
        basePackage.map((item, index) => {
          if (item.id === pk) {
            basePackageIdListRecieved.push({ value: item.id, label: item.name })
          }
        })
      });

      let tagList = [];
      this.props.tags && this.props.tags.map((tag) => {
        promotion.promo.productTags.map((productTag) => {
          if (tag.id === productTag) {
            tagList.push({ value: tag.id, label: tag.tag })
          }
        })
      })

      passedPromoObject = {
        promotionCode: promotion.promo.promotionCode,
        promotionStartDate: moment(promotion.promo && promotion.promo.startDate).format(),
        promotionEndDate: moment(promotion.promo && promotion.promo.endDate).format(),
        productId: promotion.promo.productId,
        purchaseOptionId: promotion.promo.purchaseOptionId,
        redirectLink: promotion.promo.redirectUrl,
        voucherId: parseInt(promotion.promo.voucherId),
        imageURL: promotion.promo.bannerUrl,
        displayBanner: promotion.promo.bannerStatus,
        basePackageIdList: basePackageIdListRecieved,    //when commented basePackages won't appear even in view or edit(directly)
        startDate: new Date(promotion.promo.startDate),
        endDate: new Date(promotion.promo.endDate),
        productType: promotion.promo.productType,
        tagsList: tagList
      }
      if (this.props.location && this.props.location.state && this.props.location.state.duplicate == true) {
        delete passedPromoObject.promotionCode
        this.props.initialize(passedPromoObject);
      }
      else {
        this.props.initialize(passedPromoObject);
      }


      //works well from view to edit
      // if (this.props.location && this.props.location.state && this.props.location.state.edit == true && !this.state.isSubmit) {
      //   this.props.initialize(passedPromoObject);
      // }



    }

    //get products according to 
    if (JSON.stringify(this.props.fieldValues && this.props.fieldValues.productType) !== JSON.stringify(prevProps.fieldValues && prevProps.fieldValues.productType)) {
      const { fieldValues, promotionActions } = this.props;
      let tagIdList = [];
      fieldValues && fieldValues.tagsList && fieldValues.tagsList.map(tag => tagIdList.push(tag.label));

      if (tagIdList.length === 0) {
        promotionActions.getProductByType(fieldValues.productType)
      } else {
        let data = {
          "tags": tagIdList,
          "typeId": fieldValues && fieldValues.productType
        }
        promotionActions.getproductWithTypeAndTags(data)
      }
    }

    //get products when tag list changes
    if (JSON.stringify(this.props.fieldValues && this.props.fieldValues.tagsList) !== JSON.stringify(prevProps.fieldValues && prevProps.fieldValues.tagsList)) {
      const { fieldValues, promotionActions } = this.props;
      let tagIdList = [];
      fieldValues && fieldValues.tagsList && fieldValues.tagsList.map(tag => tagIdList.push(tag.label));

      if (tagIdList.length === 0) {
        promotionActions.getProductByType(fieldValues.productType)
      } else {
        let data = {
          "tags": tagIdList,
          "typeId": fieldValues.productType
        }
        promotionActions.getproductWithTypeAndTags(data)
      }
    }

    //get selected PO's for product
    if (JSON.stringify(this.props.fieldValues && this.props.fieldValues.productId) !== JSON.stringify(prevProps.fieldValues && prevProps.fieldValues.productId)) {
      const { products, fieldValues, promotionActions } = this.props;
      let purchaseoptionGroupId;
      // console.log(products && products.products)
      if (products && products.products) {
        products.products.map((product) => {
          if (product.id === (this.props.fieldValues && this.props.fieldValues.productId)) {
            purchaseoptionGroupId = product.purchaseOptionGroupId
          }
        })
      }
      promotionActions.getPurchaseOptions(purchaseoptionGroupId)
    }

    //get PO on edit view dup
    if (JSON.stringify(this.props.products.products && this.props.products.products) !== JSON.stringify(prevProps.products.products && prevProps.products.products)) {
      const { products, fieldValues, promotionActions } = this.props;
      let purchaseoptionGroupId;
      if (products && products.products) {
        products.products.map((product) => {
          if (product.id === (this.props.fieldValues && this.props.fieldValues.productId)) {
            purchaseoptionGroupId = product.purchaseOptionGroupId
          }
        })
      }
      promotionActions.getPurchaseOptions(purchaseoptionGroupId)
    }
  }