<p>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</p> <pre class="brush:php;toolbar:false;">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, }; };</pre> <p>Berikut ialah cara saya menggunakan useGetTaskAccordingToStatus untuk mendapatkan data. Saya menggunakan React Query untuk mendapatkan data. </p> <pre class="brush:php;toolbar:false;">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 }; };</pre> <p><br /></p>

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,
  };
};