web-dev-qa-db-fra.com

setTimeout ReactJS avec la fonction de flèche es6

J'aimerais savoir comment utiliser setTimeout() sur ReactJS, car je fais ceci: 

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

et il appelle deux fois la fonction this.reqMaq().

Comment puis-je empêcher le premier appel? et juste garder l'appel après l'heure?

Ici c'est le composant:

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>
    )
  }

Je vous remercie.

javascriptreactjssettimeout
11
Rafael Mora

Essaye ça:

if (timerid) {
  clearTimeout(timerid);
}

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

Cela devrait faire l'affaire

const fx = () => this.reqMaq( obj['fkmaqid'] )
timerid = setTimeout( fx, 2000 )
2
Simone Poggi

La raison pour laquelle this.reqMak() est appelé deux fois est subtile.

Dans votre exemple, vous utilisez un appel réel à reqMak pour définir le pointeur de votre fonction pour setTimeout(). Il s’appelle pour la première fois lors de la configuration de setTimeout; la deuxième fois, c'est quand setTimeout() est en marche, 2 secondes plus tard. 

La raison suggérée pour la réponse suggérée est qu’elle n’appelle ni reqMak 'maintenant', ni plus tard, en tant que fonction appelée par setTimeout(). Ce que cela fait est de passer une fonction anonyme ()=>{} à setTimeout() pour une exécution ultérieure. Et lorsque setTimeout() exécute la fonction, 2 secondes plus tard, la fonction anonyme appelle this.reqMak(), une fois.

0
James Huddle