web-dev-qa-db-ja.com

LodashデバウンスはReact

最初に私のコードを見るのが最善でしょう：

_import React, { Component } from 'react';
import _ from 'lodash';
import Services from 'Services'; // Webservice calls

export default class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value || null
    }
  }

  onChange(value) {
    this.setState({ value });

    // This doesn't call Services.setValue at all
    _.debounce(() => Services.setValue(value), 1000);
  }

  render() {
    return (
      <div>
        <input 
          onChange={(event, value) => this.onChange(value)}
          value={this.state.value}
        />
      </div>
    )
  }
}
_

簡単な入力です。コンストラクターでは、コンポーネントのローカル状態を設定するときに（使用可能な場合）プロパティからvalueを取得します。

次に、onChangeのinput関数で状態を更新し、Services.setValue()で新しい値を設定するためにWebサービスエンドポイントを呼び出します。

動作するのは、入力のdebounceによってonChangeを直接設定した場合です。

_<input 
  value={this.state.value} 
  onChange={_.debounce((event, value) => this.onChange(value), 1000)} 
/>
_

しかし、その後_this.setState_は1000ミリ秒ごとにのみ呼び出され、ビューを更新します。テキストフィールドに入力すると、入力したものが1秒後にしか表示されないため、最終的に奇妙に見えます。

このような状況で私は何をしますか？

javascriptreactjsecmascript-6lodashdebounce
15
user818700

この問題は、デバウンス関数を呼び出さないために発生します。次の方法で行うことができます

export default class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value || null
    }
    this.servicesValue = _.debounce(this.servicesValue, 1000);
  }

  onChange(value) {
    this.setState({ value });
    this.servicesValue(value);
  }
  servicesValue = (value) => {
      Services.setValue(value)
  }
  render() {
    return (
      <div>
        <input 
          onChange={(event, value) => this.onChange(value)}
          value={this.state.value}
        />
      </div>
    )
  }
}
33
Shubham Khatri