如何根据另一个请求的响应向 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

您正在打破钩子定义中的黄金法则：

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);