如何在 reactjs 钩子中创建自定义钩子？

Question

我试图通过简单地调用 useCustomHooks 来创建一个自定义 Hooks 来处理来自任何组件的输入 HTTP 请求，但是它失败并且错误是

不能在异步函数之外使用关键字 'await'

我所做的只是一个触发http请求自定义组件方法的处理程序

import { useState } from 'react';
import axios from "axios";

const useHttpReqHandler = () => {
    const [result, setResult] = useState();

    const apiMethod = async ({url , data , method}) => {
        let options = {
            method,
            url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data
        };
        let response = await axios(options);
        const UpdatedData = await response.data;
        console.log(UpdatedData)
        setResult(UpdatedData);
    }

    return [result, apiMethod];
};

export default useHttpReqHandler;

现在我可以在我的代码和任何事件处理程序上使用这个钩子，只需像这样调用从钩子返回的 callAPI

const MyFunc = () => {
    const [apiResult, apiMethod] = useHttpReqHandler();


    const captchValidation = () => {
        const x = result.toString();;
        const y = inputValue.toString();;
        if ( x === y) {
            apiMethod({url: 'some url here', data: {"email": email}, method: 'post'});
             alert("success")
        }
        else {
             alert("fail")
        }

    }

这是一个正确的方法吗？因为我是 Reactjs 的初学者

Answer 1

这是一个工作版本：

使用HttpReqHandler.jsx

import { useState } from 'react';
import axios from "axios";

const useHttpReqHandler = () => {
    const [apiResult, setApiResult] = useState();

    const apiMethod = async ({url , data , method}) => {
        let options = {
            method,
            url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data
        };
        let response = await axios(options);
        let responseOK = response && response.status === 200 && response.statusText === 'OK';
        if (responseOK) {
            const data = await response.data;
            console.log(data)
            setApiResult(data);
        }
    }

    return [apiResult, apiMethod];
};

export default useHttpReqHandler;

这里有什么重要的：

• await 在异步函数 (apiMethod) 中调用

• 结果存储在本地状态（apiResult）

• 函数返回一个数组[apiResult, apiMethod]

如何使用：

const [apiResult, apiMethod] = useHttpReqHandler();
apiMethod({url: 'some url here', data: {"email": email}, method: 'post'});

渲染结果：

return {apiResult};

Answer 2

在我看来，最好将 .then 与 Axios 一起使用。并尝试为每个方法创建不同的函数“Get/Post...”，为什么因为在 GET 方法中您需要使用Effect，但在 POST 方法中不能相同。在 GET 方法中useHttpReqHandler.js

import { useEffect, useState } from "react";
import axios from "axios";

// GET DATA
const useHttpReqHandler = (url) => {
  const [httpData, setHttpData] = useState();

  useEffect(() => {
    axios
      .get(url)
      .then((axiosData) => {
        // Axios DATA object

        setHttpData(axiosData.data);
        // you can check what is in the object by console.log(axiosData);
        // also you can change the state, call functions...
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return httpData;
};
export default useHttpReqHandler;

在你的main file

import useHttpReqHandler from "...."
const MyFunc = () => {
       const getData = useHttpReqHandler("URL");

   return (
      <div>
...
</div>
   )
}

希望对你有帮助

对于 POST、PUT、DELETE 也是如此……您将为每个处理 Http req 的方法创建函数