為什麼這段程式碼在React中會產生無限循環。這裡的useEffect與data和columnDataWithTaskProperty一起導致了無限循環，但我不知道為什麼

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

這裡是我如何使用useGetTaskAccordingToStatus來取得資料。我使用了React Query來取得資料。

const useGetTaskAccordingToStatus = () => { const { active_project } = useSelector(projectDataInStore); const userQueries = useQueries({ queries: statesOfTaskManager.map((status) => { return { queryKey: [status, active_project], queryFn: () => customAxiosRequestForGet("/task", { status, projectName: active_project, }), onSuccess: ({ data }) => { return data; }, }; }), }); const data = userQueries?.map((item) => item?.data?.data); return { data }; };