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

Question

我试图通过简单地调用useHttpPOSTHandler来创建自定义钩子来处理来自任何组件的输入HTTP请求，并希望在Axios中使用.then，但它失败了，错误是因为我是react的新手，不能调试我尝试过的内容

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和数据的对象，而不是单独传递它们，这会导致语法错误，请将它们包装在{}中

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