찾다

 >  Q&A  >  본문

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

<p>이 코드가 React에서 무한 루프를 생성하는 이유는 무엇입니까? 여기서 useEffect는 data 및 columnDataWithTaskProperty와 함께 무한 루프를 발생시키지만 왜</p> <pre class="brush:php;toolbar:false;">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, 데이터]); 반품 { 최종상태, }; };</pre> <p>useGetTaskAccordingToStatus를 사용하여 데이터를 가져오는 방법은 다음과 같습니다. 데이터를 얻기 위해 React Query를 사용했습니다. </p> <pre class="brush:php;toolbar:false;">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); {데이터 }를 반환합니다. };</pre> <p><br /></p>
P粉018548441P粉018548441498일 전482

모든 응답(1)나는 대답할 것이다

  • P粉574695215

    P粉5746952152023-08-15 12:13:13

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

    으아악

    회신하다
    0
  • 취소회신하다