打字不工作時在 React 功能組件上去抖動

Question

我有一個表單組件，我想在輸入時執行 API 請求。 我想對此進行去抖，這樣我就不會向服務器發送垃圾郵件。 這是我的代碼：

export default function MyItem ({ id, name }) {
  const debouncePatch = (name) => {
    debounce(patchItem.bind(this, id, name), 500)
  }
  return (
    <div>
      <form
        type='text'
        value={name}
        onChange={(evt) => debouncePatch(evt.target.value)}
      />
    </div>
)
}

補丁項目對服務器進行簡單的補丁調用，以便項目的名稱在我鍵入時更新。 它看起來像這樣：

export default function patchItem (id, name,) {
  return axios.patch(`${MY_BASE_URL}/${id}`, { name })
}

隨着去抖動，它根本不起作用。 永遠不會調用patchItem函數。 我怎樣才能解決這個問題？

Answer 1

您在對input每次更改時調用debounce ，但它每次只會創建一個新的 debounce 函數。 您需要創建一個去抖動函數，然后將其用作事件處理程序。 像這樣：

function MyItem({ id, name }) {
  let debouncePatch = debounce((id, name) => {
    patchItem(id, name);
  }, 500);

  // OR SIMPLER
  let debouncePatch = _.debounce(patchItem, 500);
  return (
    <div>
      <input
        type="text"
        defaultValue={name}
        onChange={(event) => debouncePatch(id, event.target.value)}
      />
    </div>
  );
}

還要確保輸入獲得defaultValue而不是value以便可以對其進行編輯。

Answer 2

這里有2個問題。 首先， debounce返回一個函數，因此您需要調用該函數。

其次，如果你不記住去抖動的函數，那么它就不能正常工作，因為每次重新渲染都會創建一個新的去抖動函數，從而失去去抖動的意義。

嘗試這樣的事情：

const debouncePatch = useCallback(debounce(() => patchItem(this, id, name), 500), []);

Answer 3

使您的輸入可控，您可以使用簡單的實用工具 use-debounce

import { useDebounce } from 'use-debounce';

export default function MyItem ({ id, name }) {
  const [value, setValue] = useState('')
  const [debouncedValue] = useDebounce(value, 1000);

  const handleChange = useCallback((e) => {setValue(e.target.value)}, [])

  useEffect(() => {
    console.log(debouncedValue);
    *// here you can place any code what you need. **console.log** will be displayed every second, or any time that you may change in hook above.* 
  }, [debouncedValue])

  return (
    <div>
      <form
        type='text'
        value={name}
        onChange={handleChange}
      />
    </div>
)
}

附： 您肯定不必在示例中使用 bind 。 我不確定您是否可以將 onChange 事件應用於表單