Lösen Sie das Problem der Endlosschleife, die durch useEffect in React verursacht wird

Question

Warum erzeugt dieser Code eine Endlosschleife in React? Der useEffect verursacht hier zusammen mit data und columnsDataWithTaskProperty eine Endlosschleife, aber ich weiß nicht warum

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

So verwende ich useGetTaskAccordingToStatus, um die Daten abzurufen. Ich habe React Query verwendet, um die Daten abzurufen.

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

Answer 1

我建议你只使用一个use效果，并删除columnDataWithTaskProperty来测试sack，以后可以再返回它。 这是我的建议示例，但没有实际数据无法测试。

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