时间戳

首页 > 解决方案 > React Axios-Hooks：分配 URL 并使用 switch 语句调用 useAxios？

reactjs - React Axios-Hooks：分配 URL 并使用 switch 语句调用 useAxios？

问题描述

尝试创建一个使用 switch 语句的钩子，将各种 URL 分配给使用 switch 语句的 useAxios() 调用。我遇到了一个我希望输入的问题：

React 不允许我在 switch 部分之后移动调用，我收到一个编译器错误，说明我正在尝试有条件地使用钩子，它显然在 Switch 语句之外。

这是当前的测试代码（只有一个状态编码的 URL 和切换前的 useAxios 调用）：

import React, { useState, useEffect } from 'react';
import useAxios from 'axios-hooks';

export const UseTestAPI = (requestAPI, requestData) => {
   var returnData = "";
   var dataURL = "";

   const [testURL, setTestURL] = useState('https://jsonplaceholder.typicode.com/todos/1');
   const [{ data, loading, error }, refetch] = useAxios(testURL);
   console.log("data in Communicator:", data);

   switch (requestAPI)
   {

    case "getTest1Data":
        setTestURL('https://jsonplaceholder.typicode.com/todos/2');
        break;    
    case "getSourceData":
        break;

    default:
        return "ERR: API Does Not Exist";

    }
 }

标签： reactjsaxios

解决方案

您不能像您尝试的那样更改挂钩的默认值。好吧，可能有一种方法，它是 JS，一切皆有可能，但这不是使用钩子的好方法。

useAxios将采用像给定的 URL 或config。此外，您的refetch函数也将采用config您可以将部分传递给两者。我可能不会在 init 中进行调用，而是使用 baseUrl 和选项设置为不请求的 init。然后发送一个带有调用的路径，该调用useEffect将在组件挂载时被调用。config然后你可以在你的部分发送一个switch将“2”添加到baseUrl.

您也可以跳过呼叫，只在 init 中useEffect发送一个不带选项的选项，无论您喜欢哪个。url: '2'

export const UseTestAPI = (requestAPI, requestData) => {
   var returnData = "";
   var dataURL = "";

   const [{ data, loading, error }, refetch] = useAxios({baseUrl: 'https://jsonplaceholder.typicode.com/todos/'}, {manual:true});
   useEffect(() => {
         refetch({url: '1'});
      }, []
   );

   console.log("data in Communicator:", data);

   switch (requestAPI)
   {


    case "getTest1Data":
        refetch({url: '2'});
        break;    
    case "getSourceData":
        break;

    default:
        return "ERR: API Does Not Exist";

    }
 }

推荐阅读