如何分离运行selected_process与outdated_process的独立版本

现有代码存在3个逻辑漏洞导致展示异常：

• getVersions方法内部同时判断外层作用域的selected_process和outdated_process状态，只要两个状态任意一个为真，就会连续触发两次接口请求，后返回的请求结果会直接覆盖fetchedProcesses状态，最终不管从哪个入口进入，都会拿到后返回的全量过期进程数据。
• getOutDatedVersions方法定义时未声明入参，但渲染时传入了selected_process=true, outdated_process=true两个无效参数，过滤逻辑仅排除了当前选中进程的ID，没有针对两个入口做差异化过滤。
• 组件初始挂载的useEffect直接调用getVersions('')，没有判断当前激活的是哪个入口，请求逻辑和后续选中进程的触发逻辑完全耦合，没有做场景隔离。

将耦合的请求、过滤逻辑按场景拆分，保证两个入口的请求、渲染逻辑互斥，修正后代码如下：

// 组件初始化时根据当前入口触发对应请求
useEffect(() => {
  if (selected_process?.id) {
    // 选中进程入口：拉取该进程关联的历史版本
    const versionId = selected_process.root_version 
      ? selected_process.root_version.id.toString() 
      : selected_process.id.toString();
    getProcessVersions(versionId);
  }
  if (outdated_process) {
    // 全量过期进程入口：拉取所有过期进程
    getAllOutdatedProcesses();
  }
}, []);

// 监听选中进程变化，切换到对应版本列表
useEffect(() => {
  if (selected_process?.id) {
    const versionId = selected_process.root_version 
      ? selected_process.root_version.id.toString() 
      : selected_process.id.toString();
    getProcessVersions(versionId);
  }
}, [props.selected_process]);

// 拉取指定进程的关联历史版本
const getProcessVersions = (id: string) => {
  const url = `${props.location.search}?version=${id}`;
  props.searchOutdatedProcessesAction(url, (res: any) => {
    res.data.objects.length > 0 && setFetchedProcesses(res.data.objects);
  });
};

// 拉取全量过期进程列表
const getAllOutdatedProcesses = () => {
  const url = `?outdated=true&limit=0&order_by=-date_created`;
  props.searchOutdatedProcessesAction(url, (res: any) => {
    res.data.objects.length > 0 && setFetchedProcesses(res.data.objects);
  });
};

// 根据当前入口场景返回需要渲染的列表数据
const getRenderList = () => {
  // 选中进程场景：排除当前正在查看的进程本身，仅展示关联历史版本
  if (selected_process) {
    return fetchedProcesses.filter((i: Process) => i.id !== selected_process.id);
  }
  // 全量过期进程场景：直接返回所有拉取到的过期进程
  if (outdated_process) {
    return fetchedProcesses;
  }
  return [];
};

const renderList = () => {
  if (!fetchedProcesses.length) return <></>;
  return (
    <div className={styles.tableWrapper}>
      <Stack className={styles.table}>
        <DetailsList
          items={getRenderList()}
          columns={columnsList}
          setKey="none"
          layoutMode={DetailsListLayoutMode.justified}
          isHeaderVisible={true}
          selectionMode={SelectionMode.none}
        />
      </Stack>
    </div>
  );
};

• 将原来耦合在getVersions中的两个请求逻辑拆为独立方法，两个场景的请求互斥，不会同时触发导致结果互相覆盖。
• 移除渲染时传入的无效布尔参数，根据当前激活的入口场景走差异化过滤逻辑，两个入口展示内容完全隔离。
• 修正初始化和选中项变化时的请求触发逻辑，不会无差别触发全量过期进程请求。

内容的提问来源于stack exchange，提问作者aebi