Selesaikan masalah gelung tak terhingga yang disebabkan oleh useEffect dalam React

Question

Mengapa kod ini menghasilkan gelung tak terhingga dalam React. UseEffect di sini bersama-sama dengan data dan columnDataWithTaskProperty menyebabkan gelung tak terhingga, tetapi saya tidak tahu mengapa

const useBoard = () =>
  const { data: columnData } = useGetColumnQuery();
  const { data } = useGetTaskAccordingToStatus();
  const [columnDataWithTaskProperty, setColumnDataWithTaskProperty] = useState(
    []
  );

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

  useEffect(() => {
    const allColumns = columnData?.data?.map((item) => ({
      nama: item.name,
      _id: item._id,
      tugas: [],
    }));
    setColumnDataWithTaskProperty(allColumns);
  }, [columnData]);

  useEffect(() => {
      console.log("meeee data deps");
      const updatedColumns = columnDataWithTaskProperty.map((column) => ({
        ...kolum,
        tugasan: data.flat().filter((tugas) => task.status === column.name),
      }));
      sFinalState(updatedColumns);
  }, [columnDataWithTaskProperty, data]);

  kembali {
    negeri akhir,
  };
};

Berikut ialah cara saya menggunakan useGetTaskAccordingToStatus untuk mendapatkan data. Saya menggunakan React Query untuk mendapatkan data.

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

  const userQueries = useQueries({
    pertanyaan: statesOfTaskManager.map((status) => {
      kembali {
        queryKey: [status, active_project],
        queryFn: () =>
          customAxiosRequestForGet("/task", {
            status,
            Nama projek: active_project,
          }),
        onSuccess: ({ data }) =>
          mengembalikan data;
        },
      };
    }),
  });

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

  pulangkan { data };
};

Answer 1

Saya cadangkan anda hanya menggunakan kesan penggunaan dan alih keluar columnDataWithTaskProperty untuk menguji sack, anda boleh kembali kepadanya kemudian. Ini adalah contoh cadangan saya, tetapi tidak boleh diuji tanpa data sebenar.

const useBoard = () => {
  const { data: columnData } = useGetColumnQuery();
  const { data } = useGetTaskAccordingToStatus();
  const [finalState, sFinalState] = useState([]);

  useEffect(() => {
    const allColumns = columnData?.data?.map((item) => ({
      name: item.name,
      _id: item._id,
      tasks: [],
    }));
      console.log("meeee data deps");
      const updatedColumns = allColumns.map((column) => ({
        ...column,
        tasks: data.flat().filter((task) => task.status === column.name),
      }));
      sFinalState(updatedColumns);
  }, [columnData, data]);

  return {
    finalState,
  };
};