React에서 useEffect로 인해 발생하는 무한 루프 문제 해결

Question

이 코드가 React에서 무한 루프를 생성하는 이유는 무엇입니까? 여기서 useEffect는 data 및 columnDataWithTaskProperty와 함께 무한 루프를 발생시키지만 왜

const useBoard = () =>
  const { 데이터: 컬럼데이터 } = useGetColumnQuery();
  const { 데이터 } = useGetTaskAccordingToStatus();
  const [columnDataWithTaskProperty, setColumnDataWithTaskProperty] = useState(
    []
  );

  const [finalState, sFinalState] = useState([]);

  useEffect(() => {
    const allColumns = columnData?.data?.map((item) => ({
      이름: 항목.이름,
      _id: 항목._id,
      작업: [],
    }));
    setColumnDataWithTaskProperty(allColumns);
  }, [열데이터]);

  useEffect(() => {
      console.log("meeee 데이터 뎁스");
      constupdateColumns=columnDataWithTaskProperty.map((column)=>({
        ...열,
        작업: data.Flat().filter((task) => task.status === 열.이름),
      }));
      sFinalState(updatedColumns);
  }, [columnDataWithTaskProperty, 데이터]);

  반품 {
    최종상태,
  };
};

useGetTaskAccordingToStatus를 사용하여 데이터를 가져오는 방법은 다음과 같습니다. 데이터를 얻기 위해 React Query를 사용했습니다.

const useGetTaskAccordingToStatus = () =>
  const { active_project } = useSelector(projectDataInStore);

  const userQueries = useQueries({
    쿼리: StatesOfTaskManager.map((status) => {
      반품 {
        queryKey: [상태, 활성_프로젝트],
        queryFn: () =>
          customAxiosRequestForGet("/task", {
            상태,
            프로젝트 이름: active_project,
          }),
        onSuccess: ({ 데이터 }) =>
          데이터를 반환합니다.
        },
      };
    }),
  });

  const data = userQueries?.map((item) => item?.data?.data);

  {데이터 }를 반환합니다.
};

Answer 1

사용 효과를 사용하고 columnDataWithTaskProperty를 제거하여 Sack을 테스트하는 것이 좋습니다. 나중에 다시 돌아올 수 있습니다. 이것은 내 제안의 예이지만 실제 데이터 없이는 테스트할 수 없습니다.

으아악