было бы лучше сначала посмотреть на мой код:
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 миллисекунд и обновляет представление. Таким образом, ввод текста в текстовое поле выглядит странно, потому что то, что вы набрали, показывает только секунду позже.
Что мне делать в такой ситуации?