node.js - როგორ გამოიყენოთ ასინქრონული მეთოდი useEffect() ჰუკის შიგნით

მე მჭირდება api-ის ჩაწერა useEffect()-ში. დავიწყე ეს და ეს მომცა შემდეგი შეცდომა: Error: Invalid hook call. Hooks მხოლოდ ფუნქციური კომპონენტების სხეულში შეიძლება გამოიძახონ.

ჩემი კოდი შემდეგია:

-აპი, რომელიც მე მჭირდება ჩასატვირთად:

export const fetchMyApi = async (code) => {
  const { data } = await useQuery("data", () =>
    clientAPIs.getData(code)
  );
  return data;
};

-ჩემი useEffect კოდი:

  useEffect(() => {
    await fetchMyApi(values.code)
  }, [values]);

მე ინტერნეტში ბევრი პრობლემა ამ თემაზე აღმოვაჩინე, მაგრამ ყველა ძირითადად ერთსა და იმავე გადაწყვეტილებას გვთავაზობს, მაგალითად:

  useEffect(() => {
    fetchMyApi(values.code)
      .then((data) => {
        return data?.options;
      })
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [values]);

ან

  useEffect(() => {
    let didCancel = false;
    async function fetch() {
      const result = await fetchMyApi(values.code);
      if (!didCancel) {
        console.log(result);
      }
    }
    fetch();
    return () => {
      didCancel = true;
    }; 
  }, [values]);

ამაში არცერთი მიდგომა არ მუშაობს ჩემს შემთხვევაში. მე ვიყენებ Nextjs ფრეიმვორკს.

რას უნდა ვცადო?

პასუხი #1

შეცდომა: Hook-ის არასწორი გამოძახება. Hook-ები შეიძლება დაძახდეს მხოლოდ ფუნქციური კომპონენტის სხეულში.

შენ არღვევ ჰუკების წესებს. ჰუკები ვალიდურია მხოლოდ მაშინ, როცა მათ სინქრონულად მოიხმარს React კომპონენტის რენდერირებისას. ეფექტი გამოისახება განცალკევებულად კომპონენტის რენდერირების შემდეგ. ამიტომ ვერ მოიხმართ ჰუკს ეფექტიდან.

და დიახ, თქვენ აკლიტებთ ჰუქს ეფექტიდან, რადგან ეს ეფექტი:

  useEffect(() => {
    await fetchMyApi(values.code)
  }, [values]);

იკითხავს fetchMyApi ფუნქციას, რომელიც იწვევს ჰუკს:

await useQuery('data', () => /* ... */)

თქვენ არასწორად იყენებთ React Query-ს.

პირველად გააკეთეთ თქვენი fetchMyApi ისე, რომ ის უბრალოდ ასრულებდეს თავისი ასინქრონული დავალებას და სხვა არაფერი:

export const fetchMyApi = (code) => {
  return clientAPIs.getData(code)
};

შემდეგ დარეკეთ useQuery თქვენი ფუნქციური კომპონენტის ძირიდან:

function MyComponent() {
  const { data } = useQuery('data', () => fetchMyApi('some code here'))
}

დოკუმენტაცია უნდა გაწვდიდეს გზას აქედან დარჩენილი ნაწილი სრულებით