javascript - Hur kan jag göra en förfrågan till ett API baserat på svaret från en annan förfrågan? React Hook "useSwr" kan inte anropas inne i en callback

Jag har problem med att lista ut hur jag kan göra en förfrågan till ett API baserat på svaret från en annan förfrågan. Jag gör en förfrågan till ett API och hämtar IP-adressen från svaret.

Sedan vill jag göra en annan förfrågan till en annan API med IP-adressen som indata till den andra API:n. När jag provar koden nedan får jag felet React Hook "useSwr" kan inte kallas inuti en callback. React Hooks måste kallas i en React-funktionskomponent eller en anpassad React Hook-funktion

Jag använder React, TypeScript och SWR. Jag hade detta fungerande med enkel JavaScript-kod men jag tror att jag blir förvirrad med React/TypeScript/SWR här. Finns det ett bättre sätt att uppnå det jag försöker göra?

import React, {FC} from 'react';
import useSwr from 'swr';

const fetcher = (...args: Parameters<typeof fetch>) => fetch(...args).then(response => response.json());

const Webmap: FC = () => {

  const validatorUrl = 'http://url1.com';
  const ipInfoUrl =  'http://url2.com';

  const {data, error} = useSwr(validatorUrl, fetcher);
  const validatorData = data && !error ? data : [];

  if (validatorData.results != null) {
    validatorData.results.forEach(u => {
    const ipAddress= u.ip_address
    console.log(ipAddress)
    // This is where I want to make another request. I want to feed ipAddress to ipInfoUrl
    const {data, error} = useSwr(ipInfoUrl, fetcher);
    const ipData = data && !error ? data : [];
    });
  }

Svar #1

Du bryter ett gyllene regler från krokdefinition:

https://reactjs.org/docs/hooks-rules.html

Här: https://swr.vercel.app/docs/conditional-fetching#dependent

import React, {FC} from 'react';
import useSwr from 'swr';

const fetcher = (...args: Parameters<typeof fetch>) => fetch(...args).then(response => response.json());

const Webmap: FC = () => {

  const validatorUrl = 'http://url1.com';
  const ipInfoUrl =  'http://url2.com';

  const { data: validationData, error: validationError } = useSwr(validatorUrl, fetcher);
  const { data: ipData, error: ipError } = useSwr(() =>
      // this request wont be called until validationData succeeds
      // use a data from validationData, example:
      ipInfoUrl + '?ip=' validationData.results.ip_address,
      fetcher
  );

  console.log(ipData);

Relaterade artiklar