reactjs - 如何通过点击React Hooks方式发送请求？

Question

如何使用 React hooks 在按钮单击时发送 http 请求？或者，就此而言，如何对按钮单击产生任何副作用？

到目前为止，我看到的是“间接”的东西，例如:

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)}
  );
}

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

Answer 1

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} />
  )
}

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

更新:

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

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

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} />
  )
}