如何运行 selected_process 和 outdated_process 的分离版本?

分享于2022年07月17日 javascript reactjs typescript 问答
【问题标题】:如何运行 selected_process 和 outdated_process 的分离版本?(how to run separated version of selected_process and outdated_process?)
【发布时间】:2022-07-15 19:25:17
【问题描述】:

这是我的代码,我必须将两个历史组件合二为一。我正在尝试将两者结合使用 if else 循环并且它也可以运行。但在两个图标中都会显示所有过时的进程。

 useEffect(() => {
    getVersions('');
  }, []);

  useEffect(() => {
    if (selected_process && selected_process.id) {
      if (selected_process.root_version) {
        getVersions(selected_process.root_version.id.toString());
      } else {
        getVersions(selected_process.id.toString());
      }
    }
  }, [props.selected_process]);

  const getVersions = (id: string) => {
    if (selected_process) {
      const url = `${props.location.search}?version=${id}`;
      props.searchOutdatedProcessesAction(url, (res: any) => {
        res.data.objects.length > 0 && setFetchedProcesses(res.data.objects);
      });
    }
    if (outdated_process) {
      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 getOutDatedVersions = () => {
    return fetchedProcesses.filter((i: Process) => i.id != selected_process?.id);
  };

  const renderList = () => {
    if (fetchedProcesses) {
      return (
        
); } return <>; };

**************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****+


【解决方案1】:

我使用 if else 循环为两个进程合并了单独的 useEffect 函数。刚刚在 getVersion 函数中添加了过时的进程,并在 getoutdatedversions 函数中添加了返回。

useEffect(() => {
    if (selected_process && selected_process.id) {
      if (selected_process.root_version) {
        getVersions(selected_process.root_version.id.toString());
      } else {
        getVersions(selected_process.id.toString());
      }
    } else {
      getVersions('');
    }
  }, [props.selected_process]);

  const getVersions = (id: string) => {
    if (selected_process) {
      const url = `${props.location.search}?version=${id}`;
      props.searchOutdatedProcessesAction(url, (res: any) => {
        res.data.objects.length > 0 && setFetchedProcesses(res.data.objects);
      });
    } else {
      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 getOutDatedVersions = () => {
    if (selected_process) {
      return fetchedProcesses.filter((i: Process) => i.id != selected_process?.id);
    } else {
      return fetchedProcesses.filter(() => outdated_process);
    }
  };