React Hooks и метод POST

Question

Мне нужно понять, как я могу настроить пользовательский хук в React для метода POST.

Если мне нужно POST некоторые данные после щелчка, но я не могу использовать пользовательский хук вобработчик событий, как я могу это сделать?

Я сделал пользовательский хук со всей логикой выборки и относительными редукторами ... но я не знаю, как использовать его одним щелчком мыши, не нарушая правил.

Спасибо.

Answer 1

Все, что вам нужно, это обработчик, который запускает метод post

const useFetchData = ({url, headers, payload}) => {
    const [res, setRes] = useState({data: null, error: null, isLoading: false});
    const [error, setError]
    // You POST method here
    const callAPI = useCallback() => {
         setRes(prevState => ({...prevState, isLoading: true}));
         axios.post(url, headers, payload).then(res => {
            setRes({data: res.data, isLoading: false, error: null});
         }).catch((error) => {
            setRes({data: null, isLoading: false, error});
         })
    }, [url, headers, payload])
    return [res, callAPI];
}

Теперь вы можете использовать этот хук в своем коде, а в любом обработчике событий просто вызвать callAPI, возвращенный из хука, как

const MyFunc = () => {
   const [res, apiMethod] = useFetchData({url: 'some url here', headers: {ContentType: 'text/plain'}, payload: {}});

   return (
      <button onClick={() => {apiMethod()}} type="button">Submit data</button>
   )
}

Вы могли бы иметь событие, определенное в состоянии компонента, и передать его в useFetchData в качестве аргумента.