如何通过单击 React Hooks 方式发送请求? [英] How to send request on click React Hooks way?

问题描述

如何使用反应钩子在单击按钮时发送 http 请求?或者，就此而言，如何对按钮点击产生任何副作用?

How to send http request on button click with react hooks? Or, for that matter, how to do any side effect on button click?

到目前为止我看到的是有一些间接"的东西，比如:

What i see so far is to have something "indirect" like:

export default = () => {
  const [sendRequest, setSendRequest] = useState(false);

  useEffect(() => {
    if(sendRequest){
       //send the request
       setSendRequest(false);
    }
  },
  [sendRequest]);

  return (
    <input type="button" disabled={sendRequest} onClick={() => setSendRequest(true)}
  );
}

这是正确的方式还是有其他模式?

Is that the proper way or is there some other pattern?

推荐答案

export default () => {
  const [isSending, setIsSending] = useState(false)
  const sendRequest = useCallback(async () => {
    // don't send again while we are sending
    if (isSending) return
    // update state
    setIsSending(true)
    // send the actual request
    await API.sendRequest()
    // once the request is sent, update state again
    setIsSending(false)
  }, [isSending]) // update the callback if the state changes

  return (
    <input type="button" disabled={isSending} onClick={sendRequest} />
  )
}

这就是当您想在单击时发送请求并在发送时禁用按钮时的情况

this is what it would boil down to when you want to send a request on click and disabling the button while it is sending

@tkd_aj 指出这可能会发出警告:无法在未挂载的组件上执行 React 状态更新.这是一个空操作，但它表明您的应用程序中存在内存泄漏.要修复，请取消所有useEffect 清理函数中的订阅和异步任务."

@tkd_aj pointed out that this might give a warning: "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function."

实际上，发生的情况是请求仍在处理，同时您的组件会卸载.然后它尝试在未安装的组件上 setIsSending(一个 setState).

Effectively, what happens is that the request is still processing, while in the meantime your component unmounts. It then tries to setIsSending (a setState) on an unmounted component.

export default () => {
  const [isSending, setIsSending] = useState(false)
  const isMounted = useRef(true)

  // set isMounted to false when we unmount the component
  useEffect(() => {
    return () => {
      isMounted.current = false
    }
  }, [])

  const sendRequest = useCallback(async () => {
    // don't send again while we are sending
    if (isSending) return
    // update state
    setIsSending(true)
    // send the actual request
    await API.sendRequest()
    // once the request is sent, update state again
    if (isMounted.current) // only update if we are still mounted
      setIsSending(false)
  }, [isSending]) // update the callback if the state changes

  return (
    <input type="button" disabled={isSending} onClick={sendRequest} />
  )
}

这篇关于如何通过单击 React Hooks 方式发送请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！