I use Recoil to get async data and got error when I use useRecoilValue to use the data

52 Views Asked by At

I want to make some project with Recoil (quite beginner) and use atom, selector, selectorFamily etc.. and I got some issues when use selectorFamily I checked quite several times and use GPT, find similar questions..but I can't solve what problem is... the error was

Warning: React has detected a change in the order of Hooks called by Playlists.

here's code

import React, { useEffect, useState } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import {
  accessTokenState,
  detailClickedInfoState,
  isClickedState,
  selectedMusicValState,
} from "../../recoil";
import { browseHandler } from "../../recoil";
import { detailTrackHandlerState } from "../../recoil/store";

const Playlists: React.FC = () => {
  const [isClicked, setIsClicked] = useRecoilState(isClickedState);
  const [selectedVal, setSelectedVal] = useRecoilState(selectedMusicValState);
  const [clickedDetailInfos, setClickedDetailInfos] = useRecoilState(
    detailClickedInfoState
  );
  const accessToken = useRecoilValue<any>(accessTokenState);
  const [playlistsData, setPlaylistsData] = useState<any>("");
  const detailTracks = selectedVal
    ? useRecoilValue(detailTrackHandlerState(selectedVal))
    : selectedVal; --> here's problem
  
  useEffect(() => {
    if (accessToken) {
      const playlistsResultData = browseHandler(
        accessToken,
        "featured-playlists"
      );
      playlistsResultData.then((data) => setPlaylistsData(data));
    }
    console.log(detailTracks);
  }, [accessToken, selectedVal]);

and the recoil code is

export const detailTrackHandlerState = selectorFamily({
  key: "detailTrackHandlerState",
  get:
    (detailTrack: any) =>
    async ({ get }) => {
      const token = get(accessTokenState);
      let trackParameters = {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token,
        },
      };
      const responseData = await fetch(
        `${SPOTIFY_URL}/playlists/${detailTrack}/tracks?limit=15`,
        trackParameters
      ).then((res) => res.json());
      return responseData;
    },
});
0

There are 0 best solutions below