reactjs - How can I throttle the setState in React? -
there's
searchbarcomponent change whole component state,wholere-render leads child componentplayerlistwithqueryre-render new state well.there's
playerlistwithquerycomponent querygraphqlserver base on search content passed component
the problem don't wanna execute query have change value of input instantly, how can solve issue.
import playerlistwithquery './playerlistwithquery.js' class whole extends component { constructor(props) { super(props); this.state = { searchcontent: '', }; } handlechange = val => { this.setstate({ searchcontent: val, }); }; render() { return ( <div> <searchbar placeholder="id" onchange={this.handlechange} value={this.state.searchcontent} /> <playerlistwithquery searchcontent={this.state.searchcontent} {...this.props} /> </div> ); } } export default whole; // playerlistwithquery.js
const playerlistwithquery = graphql(query_single_player, { options: props => ({ fetchpolicy: 'network-only', variables: { id: props.searchcontent, }, }), })(playerlist); export default playerlistwithquery;
i using lodash's debounce same thing. or can implement debounce function (credit)
// returns function, that, long continues invoked, not // triggered. function called after stops being called // n milliseconds. if `immediate` passed, trigger function on // leading edge, instead of trailing. function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callnow = immediate && !timeout; cleartimeout(timeout); timeout = settimeout(later, wait); if (callnow) func.apply(context, args); }; };
Comments
Post a Comment