es wäre am besten, zuerst an meinem Code suchen:Lodash debounce nicht in Arbeit Reagieren
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>
)
}
}
nur eine einfache Eingabe. Im Contructor ergreift es value
von den Requisiten (falls verfügbar), um einen lokalen Zustand für die Komponente festzulegen.
Dann in der onChange
Funktion der input
ich den Status aktualisieren und dann versuchen, den Webservice-Endpunkt aufzurufen, um den neuen Wert mit Services.setValue()
zu setzen.
Was funktioniert ist, wenn ich die debounce
direkt durch die onChange
des Eingangs wie so gesetzt:
<input
value={this.state.value}
onChange={_.debounce((event, value) => this.onChange(value), 1000)}
/>
Aber dann wird this.setState
nur alle 1000 Millisekunden und aktualisieren Sie die Ansicht genannt. Wenn du ein Textfeld eingibst, sieht das komisch aus, denn was du eingegeben hast, erscheint nur eine Sekunde später.
Was mache ich in einer solchen Situation?
Ich sehe tun könnte! Ich könnte auch einfach _.debounce (...) in eine selbst-ausführende anonyme Funktion in 'onChange' richtig einpacken? – Tiwaz89
ja, das könntest du auch, aber in diesem Fall würdest du jedes Mal eine neue entprellte Funktion zurückgeben, also ist der obige Ansatz besser als das, was du vorschlägst –
Toller Punkt, danke! – Tiwaz89