javascript - 如何根据另一个请求的响应向 API 发出请求？无法在回调中调用 React Hook "useSwr"

Question

我无法弄清楚如何根据另一个请求的响应向 API 发出请求。我正在向 API 发出请求并从响应中提取 IP 地址。
然后我想使用 IP 地址作为第二个 API 的输入向另一个 API 发出另一个请求。当我尝试下面的代码时，我收到错误 React Hook "useSwr" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function我正在使用 React、TypeScript 和 SWR。我使用了一个简单的 JavaScript 代码，但我想我在这里对 React/Typescript/SWR 感到困惑。有没有更好的方法来完成我想要做的事情？

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

Answer 1

你正在打破钩子(Hook)定义的黄金法则:
https://reactjs.org/docs/hooks-rules.html
这里: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);