React antd タブの切り替えによりサブコンポーネントが繰り返し更新される

<タブ
 アクティブキー={タブアクティブキー}
 onChange={(キー: 文字列) => this.changeTab(キー)}
 タイプ="カード"
>
  <TabPane tab={"外部認証"} key="/authed-by-me">
    <AuthedCollections
        コレクションタイプ={this.collectionType}
     />
  </タブペイン>
  <TabPane tab={"権限を申請"} key="/authed-to-me">
    <AuthedCollections
      コレクションタイプ={this.collectionType}
     />
  </タブペイン>
</タブ>


changeTab = (キー: 文字列) => {
 this.collectionType = key === '/authed-by-me' ? CollectionEnums.AUTHED_TO_GRANT : CollectionEnums.AUTHED_TO_APPLY;
 this.setState({
  tabActiveKey: キー
 })
};

<タブ
 アクティブキー={タブアクティブキー}
 onChange={(キー: 文字列) => this.changeTab(キー)}
 タイプ="カード"
>
 <TabPane tab={"外部認証"} key="">
 {
 this.collectionType === CollectionEnums.AUTHED_TO_GRANT &&
 <AuthedCollections
 コレクションタイプ={this.collectionType}
 />
 }
 </タブペイン>
 <TabPane tab={"権限を申請"} key="/authed-to-me">
 {
 this.collectionType === CollectionEnums.AUTHED_TO_APPLY &&
 <AuthedCollections
 コレクションタイプ={this.collectionType}
 />
 }
 </タブペイン>
</タブ>

クエリ領域*/
    <div className="検索フォームエリア">
     {
      <div style={{ display: activeKey === '1' ? 'block' : 'none' }}><SearchFieldForm // プロジェクト角度 ref={(form) => this.ProjSearchForm = form}
       送信Fuc={this.getProjPage}
       fieldsData={projSearchData}
       列番号={4}
       diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }}
      // moreSearchData={moreSearchData}
      </div>
     }
     {
      <div style={{ display: activeKey === '2' ? 'block' : 'none' }}>< SearchFieldForm // 製品角度 ref={(form) => this.PrdSearchForm = form}
       送信Fuc={this.getProjPage}
       fieldsData={prdSearchData}
       列番号={4}
       diyItemLayout={{ labelCol: { span: 4 }, wrapperCol: { span: 17 } }}
      </div>
     }
    </div>

 {/* リストエリア */ 
        <div style={{ height: tableHeight + 100 }} className='myProjTable'> 
          <タブ defaultActiveKey="1" onChange={this.handleTabsChange}> 
            <TabPane tab="プロジェクト角度" key="1" style={{ backgroundColor: '#fff' }}> 
              <カスタムテーブル 
                行キー='プロジェクトID'
                サイズ="小"
                スタイル={{ 高さ: テーブルの高さ }}
                columns={列}
                テーブルデータ={プロジェクトテーブルデータ}
                展開された行のレンダリング = {this.expandedRowRender}
                ページネーション={ページネーション}
                handleTableChange={this.handleTableChange}
                スクロール={{ y: テーブルスクロール高さ、x: 1660 }}
                テーブル行選択 = {this.tableRowSelection}
              />
            </タブペイン>
            <TabPane tab="製品アングル" key="2" style={{ backgroundColor: '#fff' }}>
              <カスタムテーブル
                行キー="プロジェクトID"
                サイズ="小"
                スタイル={{ 高さ: テーブルの高さ }}
                列={列Prd}
                テーブルデータ={prdテーブルデータ}
                handleTableChange={this.handleTableChange}
                ページネーション={ページネーション}
                スクロール={{ y: テーブルスクロール高さ、x: 1800 }}
                テーブル行選択 = {this.tableRowSelection}
              />
            </タブペイン>
          </タブ>
        </div>