diff --git a/libs/cmdb-instances/src/cmdb-instances-select-panel/CmdbInstancesSelectPanel.tsx b/libs/cmdb-instances/src/cmdb-instances-select-panel/CmdbInstancesSelectPanel.tsx index 1d73a790f..34e56d2c0 100644 --- a/libs/cmdb-instances/src/cmdb-instances-select-panel/CmdbInstancesSelectPanel.tsx +++ b/libs/cmdb-instances/src/cmdb-instances-select-panel/CmdbInstancesSelectPanel.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useMemo } from "react"; import classnames from "classnames"; import { @@ -15,7 +15,7 @@ import { import style from "./style.module.css"; import i18n from "i18next"; import { K, NS_LIBS_CMDB_INSTANCES } from "../i18n/constants"; -import { keyBy, isEqual, isNil, isObject } from "lodash"; +import { keyBy, isEqual, isNil, isObject, isEmpty } from "lodash"; import { Spin } from "antd"; export interface BaseCmdbInstancesSelectPanelProps { @@ -105,6 +105,7 @@ export function CmdbInstancesSelectPanel( visible: false, }); const [modelMap, setModelMap] = useState({}); + const fetchInstances = async (instanceIdList: string[]): Promise => { let instances: any[] = []; if (instanceIdList?.length) { @@ -125,22 +126,10 @@ export function CmdbInstancesSelectPanel( return instances; }; + const loadedInstanceIds = + props.value?.map((i) => (isObject(i) ? (i as any).instanceId : i)) || []; useEffect(() => { - const instanceIds = - props.value?.map((i) => (isObject(i) ? (i as any).instanceId : i)) || []; - const initInstances = async (): Promise => { - const instances = await fetchInstances(instanceIds); - setSelectedInstanceList(instances); - setPartialSelectedInstances( - props?.isOperate - ? instances - : instances.slice(0, displayedSelectedInstancesMaxNumber) - ); - props.onFetchedInstances?.(instances); - }; - - initInstances(); const getModelMap = async (): Promise => { let modelMap: Record>; @@ -155,7 +144,25 @@ export function CmdbInstancesSelectPanel( setModelMap(modelMap); }; getModelMap(); - }, [props.objectId, props.value]); + }, [props.objectId]); + + useEffect(() => { + let instances = []; + + const initInstances = async (): Promise => { + instances = await fetchInstances(loadedInstanceIds); + setSelectedInstanceList(instances); + setPartialSelectedInstances( + props?.isOperate + ? instances + : instances.slice(0, displayedSelectedInstancesMaxNumber) + ); + props.onFetchedInstances?.(instances); + }; + if (!isEmpty(loadedInstanceIds)) { + initInstances(); + } + }, [loadedInstanceIds.join()]); const openAddInstancesModal = () => { setAddInstancesModal({ visible: true });