React Hooks和POST方法

Question

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

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

我用所有提取逻辑和相对的reducer制作了一个自定义的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>
   )
}

您可以在组件状态中定义有效负载，然后将其传递给useFetchDataas参数。