Лодэшский дебют не работает в 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>
    )
  }
}

Просто простой ввод. В contructor он захватывает value из реквизита (если доступно) при задании локального состояния для компонента.

Затем в функции onChange input я обновляю состояние, а затем пытаюсь вызвать конечную точку webservice для установки нового значения с помощью Services.setValue().

Что работает, если я устанавливаю debounce напрямую по onChange ввода так:

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

Но тогда this.setState только каждые 1000 миллисекунд и обновляет представление. Таким образом, ввод текста в текстовое поле выглядит странно, потому что то, что вы набрали, показывает только секунду позже.

Что мне делать в такой ситуации?

Ответ 1