Question

每次输入标签发生任何更改时，都会发送HTTP请求。在输入标签中编写了一个onChange方法，该方法调用Http请求。但是我不想在我键入的每个输入上调用。如果每隔1秒钟输入一次输入，它将中止Http请求。

Answer 1

您可以使用react钩子轻松地做到这一点，

import React, { useState, useCallback, useEffect } from "react";


export default function App() {
  const [inputVal, setInputVal] = useState("");
  const onInputChange = useCallback(e => setInputVal(e.target.value));

  useEffect(() => {
    const abortController = new window.AbortController();
    const signal = abortController.signal;
    fetch("https://api.github.com/users/octocat", { signal });
    return () => {
      if (signal && abortController.abort) {
        abortController.abort();
      }
    };
  }, [inputVal]);

  return <input type="text" value={inputVal} onChange={onInputChange} />;
}

abortController.abort将在致电useEffect之前取消您的请求。

沙盒链接：https://codesandbox.io/s/jolly-yalow-2j46o

除此之外，您还可以定义自己的去抖动器。

在沙箱中查看网络请求。

在更改reactjs时中止HTTP请求

1 个答案: