相关疑难解决方法(0)

你如何在React.js中进行去抖动？

我想辩论handleOnChange.

我试过debounce(this.handleOnChange, 200)但它不起作用.

function debounce(fn, delay) {
  var timer = null;
  return function() {
    var context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

var SearchBox = React.createClass({
  render: function() {
    return <input type="search" name="p" onChange={this.handleOnChange} />;
  },

  handleOnChange: function(event) {
    // make ajax call
  }
});

使用React 16.8.6（在以前的版本16.8.3中很好），当我尝试防止在获取请求上发生无限循环时，出现此错误

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

我一直找不到停止无限循环的解决方案。我想远离使用useReducer()。我确实在https://github.com/facebook/react/issues/14920找到了这个讨论，在这里可能的解决方案是You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.我不确定自己在做什么，所以我还没有尝试实现它。

我有这个当前设置，React hook useEffect永远/无限循环连续运行，唯一的注释是useCallback()我不熟悉的。

我目前的使用方式useEffect()（类似于，我一开始只想运行一次componentDidMount()）

useEffect(() => {
    fetchBusinesses();
  }, []);

const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      }) …

在我的 React Hooks 应用程序中，我需要让用户在输入字段中键入 1000 毫秒。当 1000 毫秒到期时，将发送带有输入值的 API 请求。

<input type='text' name='name' className='th-input-container__input' onChange={evt => testFunc2(evt.target.value)} />

该值设置为testFunc2(evt.target.value)：

const testFunc2 = useCallback(debounce((text) => setNameFilter(text), 1000), []);

一旦nameFilter设置为新值，useEffect就会发出 API 请求，因为nameFilter它是依赖项。这样，仅使用最终的用户输入而不是每个击键值来查询 API，但输入仍不受控制。当我将当前nameFilter值添加到输入时，value={nameFilter}用户无法在输入中键入，并且输入仅接收最后键入的字符。

如何让用户输入的字符显示在输入中？