javascript - ¿Cómo puedo hacer una solicitud a una API basada en la respuesta de otra solicitud? El Hook de React "useSwr" no puede ser llamado dentro de un callback

Estoy teniendo problemas para averiguar cómo puedo hacer una solicitud a una API basada en la respuesta de otra solicitud. Estoy haciendo una solicitud a una API y extrayendo la dirección IP de la respuesta.

Luego quiero hacer otra solicitud a una API diferente usando la dirección IP como entrada para la segunda API. Cuando pruebo el código a continuación, obtengo el error React Hook "useSwr" no puede ser llamado dentro de un callback. Los Hooks de React deben ser llamados en un componente de función de React o en una función personalizada de Hook de React

Estoy usando React, TypeScript y SWR. Esto funcionaba con un código JavaScript simple, pero creo que me estoy confundiendo con React/TypeScript/SWR aquí. ¿Hay una mejor manera de lograr lo que estoy tratando de hacer?

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 : [];
    });
  }

Respuesta #1

Estás rompiendo una regla de oro de la definición de hook:

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

Aquí: 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);