打字不工作时在 React 功能组件上去抖动答案

【问题标题】：Debounce on a React functional component when typing not working打字不工作时在 React 功能组件上去抖动
【发布时间】：2020-10-11 05:25:33
【问题描述】：

我有一个表单组件，我想在输入时执行 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 函数永远不会被调用。我该如何解决这个问题？

【问题讨论】：

debounce 返回一个“可去抖动”的新函数。您在处理程序中调用 debounce 而不是 debounced 函数。

标签： javascript reactjs debounce

【解决方案1】：

每次对input 进行更改时，您都会调用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，以便可以对其进行编辑。

【讨论】：

【解决方案2】：

这里有 2 个问题。首先，去抖动返回一个函数，所以你需要调用那个函数。

其次，如果你不记住去抖动函数，那么它就不能正常工作，因为每次重新渲染都会创建一个新的去抖动函数，从而破坏去抖动的点。

试试这样的：

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

【讨论】：

【解决方案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>
)
}

ps。您肯定不必在示例中使用 bind 。而且我不确定您是否可以将 onChange 事件应用于表单

【讨论】：