React Hooks和POST方法

Question

我需要了解如何在React中为POST方法设置自定义挂钩。

如果我需要在点击后发布一些数据，但我不能在事件处理程序中使用自定义挂钩，我该怎么办呢？

我使用所有获取逻辑和相对缩减器制作了一个自定义Hook ...但我不知道如何在一次点击中使用它而不违反规则。

谢谢。

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。