Как отправить запрос, используя настроенные крючки в React Hooks - PullRequest
Новая
       19

Как отправить запрос, используя настроенные крючки в React Hooks

0 голосов
/ 25 апреля 2020

Я пытался создать пользовательские хуки для обработки входного HTTP-запроса от любого компонента, просто вызвав useHttpPOSTHandler и хочу использовать .then с Ax ios, но его получение не удалось, и ошибка - я новичок в реакции, не могу отладить то, что я пробовал 

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;

1 Ответ

1 голос
/ 25 апреля 2020

Аргументы для использования HTTPPostHandler, как ожидается, будут объектом с 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>
   )
}
...