Lodashデバウンスは、それが最初に私のコードを見て最善だろう

Question

を反応します。コンストラクターでは、コンポーネントのローカルステートを設定するときに、小道具（利用可能な場合）からvalueを取得します。

次にinputのonChange機能で状態を更新してから、Webサービスエンドポイントを呼び出して、新しい値をServices.setValue()に設定しようとします。

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

をしかし、その後this.setStateが呼び出されるだけで1000ミリ秒ごとに、ビューを更新します。私はそうのような入力のonChangeによって直接debounceを設定した場合は作業を何

です。あなたが入力したものが2番目の後にしか表示されないので、テキストフィールドでの入力は奇妙に見えます。

このような状況ではどうすればよいですか？あなたはデバウンス関数を呼び出していないので、

Answer 1

問題が発生すると、あなたは次のように私は見

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 doesn't call Services.setValue at all 
    this.servicesValue(value); 
    } 
    servicesValue = (value) => { 
     Services.setValue(value) 
    } 
    render() { 
    return (
     <div> 
     <input 
      onChange={(event, value) => this.onChange(value)} 
      value={this.state.value} 
     /> 
     </div> 
    ) 
    } 
}