useEffect内にあるAPIコールをするファンクションをuseState値がセットされ次第、１度だけ実行したい。

Question

実現したいこと

それぞれのuseStateに値がセットされてから、useEffect内のファンクションを実行し、APIコールをしたい。
useEffectの処理が終わり次第、最後の行のconsole.logを一度だけ実行したい。

発生している問題

現在のコードを実行すると、useEffectのdependencyがアップデートされる度にuseEffect内のファンクションが実行されるため、最後のファンクションが実行されるまでに、何回もAPIコールをしている。また、一度useEffect内のファンクションをすべて呼び出しても、useEffect外にあるconsole.logが永遠と呼び出される

実現したい流れ
MainScreenのrender -> user(ログイン時にオブジェクトを取得) -> token(Reduxに保存されているuserオブジェクトのemailを使用して、トークンを取得) -> getMyUserId(APIコールを１度だけ) ->　setUserId -> GetMyCalendarId(APIコールを１度だけ) -> setCalendarId -> getEvents(APIコールを１度だけ) -> setEvent -> console.log

現在の流れ
MainScreenのrender -> user(ログイン時にオブジェクトを取得) -> token(Reduxに保存されているuserオブジェクトのemailを使用して、トークンを取得) -> getMyUserId(tokenがセットされるまで何度もAPIコール) -> setUserId -> GetMyCalendarId(userIdがセットされるまで何度もAPIコール) -> setCalendarId -> getEvents(calendarIdがセットされるまで何度もAPIコール) -> setEvents ->　eventsがセットされた後もuseEffect外にあるconsole.logが永遠と呼び出される。

コード

const MainScreen: React.FC = () => {
  const [userId, setUserId] = useState<string>("");
  const [calendarId, setCalendarId] = useState<string>("");
  const [events, setEvents] = useState<Events[]>([]);
  const user = useGlobalState("user");
  const userEmail: string = user.email;
  const token = tokenDict[userEmail];
  const start = new Date();
  let end = new Date();
  end = new Date(end.setDate(end.getDate() + 7));
  const now = moment(start).format("L");
  const till = moment(end).format("L");
  const root = "base_URL";


  const header = {
    headers: { Authorization: "Bearer " + token },
  };

  const getMyUserId = async (header: any) => {
    const data = await axios.get(`${root}`, header);
    const user_id = data.data.objects[0].id.toString();
    setUserId(user_id);
  };

  const getMyCalendarId = async (id: string, header: any) => {
    const url = `${root}${id}/cal/calendars`;
    const data = await axios.get(`${url}`, header);
    for (let i = 0; i < data.data.objects.length; i++) {
      if (data.data.objects[i].name === user.email) {
        const calendar_id = data.data.objects[i].id.toString();
        setCalendarId(calendar_id);
      }
    }
  };

  const getEvents = async (user: string, calendar: string, header: any) => {
    const start = new Date();
    let end = new Date();
    end = new Date(end.setDate(end.getDate() + 7));
    const now = start.toISOString();
    const till = end.toISOString();
    const url = `${root}${user}/cal/calendars/${calendar}/events/?start=${now}&end=${till}`;
    const data = await axios.get(`${url}`, header);
    setEvents(data.data.objects);
  };

  useEffect(() => {
    if (header && token) {
      getMyUserId(header);
    }
    if (userId && header) {
      getMyCalendarId(userId, header);
    }
    if (userId && calendarId && header) {
      getEvents(userId, calendarId, header);
    }
  }, [userId, calendarId, header, token]);

console.log("Check outside of useEffect")

Answer 1

また、一度useEffect内のファンクションをすべて呼び出しても、useEffect外にあるconsole.logが永遠と呼び出される

これはそういうものです。useEffectなどを挟まず、関数コンポーネントへ直接書いたコードは、描画のたびに実行されます。

Comments

[maisumakun]

MainScreenのrender -> user(ログイン時にオブジェクトを取得) -> token(Reduxに保存されているuserオブジェクトのemailを使用して、トークンを取得) -> getMyUserId(APIコールを１度だけ) ->　setUserId -> GetMyCalendarId(APIコールを１度だけ) -> setCalendarId -> getEvents(APIコールを１度だけ) -> setEvent

このようにしたいのであれば、useEffectを細かく分けて、条件ごとに抽出する必要があるかと思います。

[maisumakun]

useEffect(() => {
if (header && token) {
getMyUserId(header);
}
}, [header, token]);

useEffect(() => {
if (userId && header) {
getMyCalendarId(userId, header);
}
}, [userId, header]);

useEffect(() => {
if (userId && calendarId && header) {
getEvents(userId, calendarId, header);
}
}, [userId, calendarId, header]);