web-dev-qa-db-ja.com

React入力でLodashデバウンス

入力onChangeイベントから呼び出される検索関数にlodashによるデバウンスを追加しようとしています。以下のコードは、型エラー「関数が期待されています」を生成します。これは、lodashが関数を期待しているため理解しています。これを行う正しい方法は何ですか？すべてインラインで実行できますか？これまでのところ、ほぼすべての例を試しましたSO無駄に。

search(e){
 let str = e.target.value;
 debounce(this.props.relay.setVariables({ query: str }), 500);
},
reactjslodashrelaydebouncing
11
Michael Kaufman

デバウンス関数は、JSXでインラインで渡すか、以下に示すようにクラスメソッドとして直接設定できます。

search: _.debounce(function(e) {
  console.log('Debounced Event:', e);
}, 1000)

フィドル：https://jsfiddle.net/woodenconsulting/69z2wepo/36453/

Es2015 +を使用している場合は、constructorまたはcomponentWillMountなどのライフサイクルメソッドでデバウンスメソッドを直接定義できます。

例：

class DebounceSamples extends React.Component {
  constructor(props) {
    super(props);

    // Method defined in constructor, alternatively could be in another lifecycle method
    // like componentWillMount
    this.search = _.debounce(e => {
      console.log('Debounced Event:', e);
    }, 1000);
  }

  // Define the method directly in your class
  search = _.debounce((e) => {
    console.log('Debounced Event:', e);
  }, 1000)
}
20
Jeff Wooden

それはそれほど簡単な質問ではありません

発生しているエラーを回避するには、関数でsetVariablesをラップする必要があります。

 search(e){
  let str = e.target.value;
  _.debounce(() => this.props.relay.setVariables({ query: str }), 500);
}

一方、デバウンスロジックはリレー内にカプセル化する必要があると信じています。

1
vittore

これは私が丸一日グーグルした後にそれをしなければならなかった方法です。

const MyComponent = (props) => {
  const [reload, setReload] = useState(false);

  useEffect(() => {
    if(reload) { /* Call API here */ }
  }, [reload]);

  const callApi = () => { setReload(true) }; // You might be able to call API directly here, I haven't tried
  const [debouncedCallApi] = useState(() => _.debounce(callApi, 1000));

  function handleChange() { 
    debouncedCallApi(); 
  }

  return (<>
    <input onChange={handleChange} />
  </>);
}
0
Aximili