Установка состояния в componentDidMount с помощью циклов и ifs

Question

У меня есть провайдер, который предоставляет теги для новостных статей (список с новостями).Если их больше трех, дополнительные теги (> 3) будут сгруппированы (в примере кода они называются plusTags).Я вижу в своей консоли, что у меня есть все теги, но они не распределены правильно.Пример.

На первой странице у меня есть четыре новости с распределенными тегами "a, b, c", b "," ac "" b ". На следующей странице статьи новостей (очевидно)отличается, но распределение тегов такое же ("a, b, c", b "," ac "" b "), как на первой странице, даже если теги должны отличаться.Таким образом, распределение происходит по той же схеме.Я подозреваю, что это мой код в моей функции componentDidMount, так как там, где я распространяю все теги.Подозреваю, что это может повториться, потому что эта функция повторяется?

public componentDidMount(): void {
  let tags = [];
  let plusTags = [];

  if (this.props.tags != null) {
    if (this.props.tags.length > 0) {
      for (var i = 0; i < 3; i++) {
        if (this.props.tags[i] != undefined) {
          tags.push(this.props.tags[i] + " ");
        }
      }

      for (var j = this.props.tags.length - 1; j >= 3; j--) {
        if (this.props.tags[i] != undefined) {
          plusTags.push(this.props.tags[j] + " ");
        }
      }
    } else {
      tags = this.props.tags;
    }
  }

  this.setState({
    tags: tags,
    plusTags: plusTags
  });
}

и в моем рендере

public render(): React.ReactElement<INewsTagsProps> {
   return <React.Fragment>
     <div className={styles.tagContainer}>
    {
      this.state.tags ? 
      this.state.tags.map((t) => {
        if (this.props.background == BackgroundType.None) {
          return (
            <a href={this.props.tagPageUrl + "?tag="+ t}>
              <span className={styles.tagNewsTiles}>{t}</span>
            </a>);
        }
        else {
          return(
            <a href={this.props.tagPageUrl + "?tag="+ t}>
              <span className={styles.tagFollowedNews}>{t}</span>
          </a>);
        }
      })
      : null 
    }
    {this.state.plusTags.length > 0 ?  
      <span className={`callout-target-${this.state.targetIndex} ${this.props.background == BackgroundType.None ? styles.tagNewsTiles : styles.tagFollowedNews}`} 
      onClick={(e) => {e.stopPropagation(); this.setState({plusTagsDialogOpen: true});}}>+ {this.state.plusTags.length}</span>
      :
      null
    }
   </div>
   <Callout
          className="ms-CalloutExample-callout"
          gapSpace={0}
          target={this.state.target}
          onDismiss={() => this.closeDialog()}
          hidden={!this.state.plusTagsDialogOpen}
          isBeakVisible={true}
          beakWidth={10}              
          directionalHint={DirectionalHint.topCenter}
      >

  <div className={styles.tagPopupWrapper}>
     <div className={styles.tagPopupContainer}>
      {this.state.plusTags ? 
        this.state.plusTags.map((t) => {
        if (this.props.background == BackgroundType.None) {
          return (
            <a href={this.props.tagPageUrl+ "?tag="+t}>
              <span className={styles.tagNewsTiles}>{t}</span>
            </a>);
        }
        else {
          return(
            <a href={this.props.tagPageUrl+ "?tag="+t}>
              <span className={styles.tagFollowedNews}>{t}</span>
            </a>);
        }
      }):
      null}
      </div>
    </div>              
  </Callout>       

;