当每个请求依赖于前一个请求时，React useQueries 会发出多个 get 请求（继续参数）

Question

我正在寻找从维基百科 API 获取页面。 为了保持简短，我不会深入解释，但底线是我需要使用上一个请求（解析时）返回的内容作为新请求中的参数。

    "batchcomplete": "",
    "continue": {
        "grncontinue": "0.117298963004|0.117302224597|46297018|0",
        "continue": "grncontinue||"

我尝试了几种方法，这是我最新的尝试：

 const results = useQueries([
    {
      queryKey: [`getRandomWikis-${count}`],
      queryFn: async () => {
        const res = await axios.get(url + endpoint);
        setEndpoint(`&grncontinue||=${res.data?.data?.continue?.grncontinue}`);
        setCount((prev) => prev + 1);
        setAllData((prev) => [...prev, res.data?.data?.query?.pages]);
        return res;
      },
      enabled: isLocalStorageEmpty,
    },
    {
      queryKey: [`getRandomWikis-${count}`],
      queryFn: async () => {
        const res = await axios.get(url + endpoint);
        setEndpoint(`&grncontinue||=${res.data?.data?.continue?.grncontinue}`);
        setCount((prev) => prev + 1);
        setAllData((prev) => [...prev, res.data?.data.query.pages]);
        return res;
      },
      enabled: isLocalStorageEmpty && count > 1,
    },
    {
      queryKey: [`getRandomWikis-${count}`],
      queryFn: async () => {
        const res = await axios.get(url + endpoint);
        setEndpoint(`&grncontinue||=${res.data?.data?.continue?.grncontinue}`);
        setCount((prev) => prev + 1);
        setAllData((prev) => [...prev, res.data?.data.query.pages]);
        return res;
      },
      enabled: isLocalStorageEmpty && count > 2,
    },
  ]);

  results[2].data?.data && console.log(allData);

由于某种原因，我收到了无休止的请求，我的组件重新渲染了很多次，直到崩溃，并且没有任何内容记录到控制台。

想法？我使用 useQueries 是否错误？不同的方法？ （这里我提出了 3 个要求，但我的想法是能够提出更多）

Answer 1

如果您执行以下操作，这可以大大简化：

• 为查询创建自定义挂钩并多次实现
• 删除

  setAllData()

  并简单地引用从钩子返回的数据

// create a custom hook
const useWiki = (grncontinue) =>
  useQuery({
    queryKey: ['getRandomWikis', grncontinue],
    queryFn:() => {
      const fullUrl = grncontinue ? url : `&grncontinue||=${grncontinue}`;
      return axios.get(url + endpoint).then(({data}) => return data);
    },
    enabled: isLocalStorageEmpty
  })
        
      
// and implement it multiple times in component
const {data: firstData} = useWiki();
const {data: secondData} = useWiki(firstData?.continue?.grnContinue)
const {data: thirdData} = useWiki(secondData?.continue?.grnContinue)

console.log([...firstData, ...secondData, ...thirdData]);