javascript - React Hooks 和 POST 方法

Question

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

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

我制作了一个包含所有获取逻辑和相关缩减器的自定义 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];
}

现在您可以在您的代码和任何事件处理程序中使用此 Hook ，只需调用从 Hook 返回的 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。