Lösen Sie das Problem der Endlosschleife, die durch useEffect in React verursacht wird
<p>Warum erzeugt dieser Code eine Endlosschleife in React? Der useEffect verursacht hier zusammen mit data und columnsDataWithTaskProperty eine Endlosschleife, aber ich weiß nicht warum</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 = columnsData?.data?.map((item) => ({
Name: item.name,
_id: item._id,
Aufgaben: [],
}));
setColumnDataWithTaskProperty(allColumns);
}, [columnData]);
useEffect(() => {
console.log("meeee data deps");
const updateColumns = columnsDataWithTaskProperty.map((column) => ({
...Spalte,
Aufgaben: data.flat().filter((task) => task.status === Column.name),
}));
sFinalState(updatedColumns);
}, [columnDataWithTaskProperty, data]);
zurückkehren {
finalState,
};
};</pre>
<p>So verwende ich useGetTaskAccordingToStatus, um die Daten abzurufen. Ich habe React Query verwendet, um die Daten abzurufen. </p>
<pre class="brush:php;toolbar:false;">const useGetTaskAccordingToStatus = () =>
const { active_project } = useSelector(projectDataInStore);
const userQueries = useQueries({
Abfragen: statesOfTaskManager.map((status) => {
zurückkehren {
queryKey: [Status, aktives_Projekt],
queryFn: () =>
customAxiosRequestForGet("/task", {
Status,
Projektname: aktives_Projekt,
}),
onSuccess: ({ data }) =>
Rückgabedaten;
},
};
}),
});
const data = userQueries?.map((item) => item?.data?.data);
return { data };
};</pre>
<p><br /></p>