在useEffect中使用了setState，报错/陷入死循环

  const { projects: allProjects,mutateProjects } = useProjects('未完成','all');

  const {data: type} = useSWR(
      workspaceSlug ? LOV_GETLIST(workspaceSlug as string) : null,
      () => issuesService.getIssuesType()
  );
  const orderedJoinedProjects: IProject[] | undefined = allProjects
    ? orderArrayBy(allProjects, "sort_order", "ascending")
    : undefined;
  const [proJectType,setProJectType]= useState([]);
const fetchData = ()=>{
    const newProject = allProjects.map(item => ({ ...item, href: `aaaaaaa` }));
    let filterData = [];
    type.forEach(i=>{
      let temp = newProject.filter(it => it.event_type === i.lovValue);
      if (temp.length>0){
        filterData.push({
          ...i,
          projectList:temp,
          name:i.lovValue,
          childId:temp?.map(it=>it.id),
        });
      }
    });
     setProJectType(filterData);
  };
  useEffect(()=>{
    if (orderedJoinedProjects?.length > 0 && type?.length > 0){
     fetchData()
    }
  },[orderedJoinedProjects,type]

 

next-dev.js:20 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

每次使用useState的set函数都会触发重新渲染，每次 render 之后都会执行 useEffect，useEffect的依赖项为引用数据类型，React在对比时会得出该依赖每次都不相同，即使看起来内容相同，但是每次的引用地址都不一样。

在useEffect中使用setState，而该setState用于渲染dom的时候，会触发useEffect，从而触发循环，导致内存耗尽

解决方法：

1.每次更新状态的时候，都比较数据是否相同

 if (JSON.stringify(newProJectType) !== JSON.stringify(proJectType)) {
     setProJectType(newProJectType);
      }

2. 对orderedJoinedProjects的处理挪到数据获取的时候

 const { data: projects, mutate: mutateProjects } = useSWR(
      workspaceSlug ? PROJECTS_LIST(workspaceSlug as string)
          : null,
      () => projectService.getProjects(workspaceSlug as string).then(res=>{
        // 处理res
        // ...
        return res
      })
  );