ReactのuseEffectによる無限ループの問題を解決

Question

このコードは React で無限ループを生成するのはなぜですか。ここの useEffect と data および columnDataWithTaskProperty は無限ループを引き起こしますが、なぜ

が発生するのかわかりません。

const useBoard = () => {
  const { データ: 列データ } = useGetColumnQuery();
  const { データ } = useGetTaskAccordingToStatus();
  const [columnDataWithTaskProperty, setColumnDataWithTaskProperty] = useState(
    []
  );

  const [finalState, sFinalState] = useState([]);

  useEffect(() => {
    const allColumns = columnData?.data?.map((item) => ({
      名前: item.name、
      _id: item._id、
      タスク: []、
    }));
    setColumnDataWithTaskProperty(allColumns);
  }, [列データ]);

  useEffect(() => {
      console.log("meeee データ デプス");
      const updatedColumns = columnDataWithTaskProperty.map((column) => ({
        ...カラム、
        タスク: data. flat().filter((task) => task.status === column.name)、
      }));
      sFinalState(updatedColumns);
  }, [columnDataWithTaskProperty, データ]);

  戻る {
    最終状態、
  };
};

ここでは、useGetTaskAccordingToStatus を使用してデータを取得する方法を示します。 React Queryを使用してデータを取得しました。

const useGetTaskAccordingToStatus = () => {
  const { active_project } = useSelector(projectDataInStore);

  const userQueries = useQueries({
    クエリ: statesOfTaskManager.map((ステータス) => {
      戻る {
        queryKey: [ステータス、アクティブなプロジェクト]、
        queryFn: () =>
          CustomAxiosRequestForGet("/タスク", {
            状態、
            プロジェクト名: active_project、
          })、
        onSuccess: ({ データ }) => {
          データを返す。
        }、
      };
    })、
  });

  const data = userQueries?.map((item) => item?.data?.data);

  {データ}を返します。
};

Answer 1

use エフェクトを使用して、columnDataWithTaskProperty を削除してサックをテストすることをお勧めします。後で返すことができます。 これは私の提案の一例ですが、実際のデータがなければテストできません。

リーリー