时间戳

首页 > 解决方案 > 如何在 React Hooks 中使用自定义 Hooks 发送请求

reactjs - 如何在 React Hooks 中使用自定义 Hooks 发送请求

问题描述

我试图通过简单地调用 useHttpPOSTHandler 并希望将 .then 与 Axios 一起使用来创建一个自定义 Hooks 来处理来自任何组件的输入 HTTP 请求，但是它失败并且错误是因为我是新手反应无法调试我所拥有的试过了

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

const useHttpPOSTHandler = ({url , data}) => {
    const [httpData, setHttpData] = useState();

    const apiMethod = useCallback( ({url , data}) => {
        axios
          .post(url , data)
          .then((response) => {
            console.log(response)
            console.log(response.data)
            setHttpData(response.data);
          })
          .catch((error) => {
            console.log(error);
          });
    }, [setHttpData])

    return [ httpData , apiMethod];
};

export default useHttpPOSTHandler;

标签： reactjsaxiosreact-hooks

解决方案

useHTTPPostHandler 的参数应该是带有键 url 和 data 的对象，而不是您单独传递它们导致语法错误，将它们包装在{} 

const getData = useHttpPOSTHandler(
     { url: 'url', data: { "password": userPassword, "username": userName }
});

编辑：根据您的更新，一旦您进行 API 调用，您就不会看到更新的数据。它将反映在下一次渲染中

import useHttpPOSTHandler from "...."
const MyFunc = () => {
    const [httpData, apiMethod] = useHttpPOSTHandlerdotthen()

    const handleSubmit = () => {
        apiMethod({url: 'url' , data: { "password": userPassword, "username": userName }})
    }

   if(httpData){
       console.log("entered in api method")
       console.log(httpData)
   }

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

推荐阅读