Rafael Mora Rafael Mora - 3 months ago 45
React JSX Question

setTimeout ReactJS with arrow function es6

I'd like to know how to use

setTimeout()
on ReactJS, because I'm doing this:

timerid = setTimeout( () => this.reqMaq( obj['fkmaqid'] ), 2000 )


and it calls twice the function
this.reqMaq()
.

How do I prevent the first call? and just keep the call after the time?

Here it's the Component:

reqMaq(maqid) {
return fetch(`/scamp/index.php/batchprodpry/${maqid}`, {credentials: 'same-origin'})
.then(req => {
if (req.status >= 400) {
throw new Error("Bad response from server")
}
return req.json()
})
.then(json => this.processMaqReq(json))
.catch(function(error) {
console.log('request failed', error)
})
}
.
.
.
handleChangeMaq (event) {
event.preventDefault()
if (event.target.value.length > 0) {
let obj = this.state.obj
obj['fkmaqid'] = VMasker.toPattern(event.target.value, "99-99-99-99")
// if (timerid) {
// clearTimeout(timerid)
// }
// timerid = setTimeout(() => {
// if (!isRunning) {
// this.reqMaq(obj['fkmaqid'])
// }
// }, 2000)
const fx = () => this.reqMaq( obj['fkmaqid'] )
timerid = setTimeout( fx, 2000 )
this.setState({ obj: obj })
}
}
.
.
.
render() {
.
.
.
return (
<div className="form-group">
<label htmlFor="maquina">M&aacute;quina</label>
<input type="text" className="form-control" id="maquina"
name="maquina"
placeholder="Maquina"
value={this.state.obj['fkmaqid'] || ''}
onChange={this.handleChangeMaq}
ref={node => {
input1 = node
}}
required="required"
/>
</div>
)
}


Thank you.

Answer

Try this:

if (timerid) {
  clearTimeout(timerid);
}

timerid = setTimeout(() => {
  this.reqMaq(obj['fkmaqid'])
}, 2000);
Comments