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

Question

我试图创建一个自定义 Hooks 来处理来自任何组件的输入 HTTP 请求，只需调用 useHttpPOSTHandler 并希望将 .then 与 Axios 一起使用，但它会失败并且错误是 因为我是新来的反应无法调试这个 我尝试过的

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;

Answer 1

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