web-dev-qa-db-ja.com

矢印関数es6を使用したsetTimeout ReactJS

ReactJSでsetTimeout()を使用する方法を知りたいのですが、これをやっているからです：

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

そして、関数this.reqMaq()を2回呼び出します。

最初の呼び出しを防ぐにはどうすればよいですか？そして、単に呼び出しを続けるafter the time？

ここにコンポーネントがあります：

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

ありがとうございました。

javascriptreactjssettimeout
17
Rafael Mora

これを試して：

if (timerid) {
  clearTimeout(timerid);
}

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

これはトリックを行う必要があります

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

this.reqMak()が2回呼び出される理由は微妙です。

この例では、reqMakの実際の呼び出しを使用して、setTimeout()の関数ポインターを線引きします。最初に呼び出されるのは、setTimeoutをセットアップしたときです。 2回目は、setTimeout()が実行されるとき、2秒後です。

提案された答えが機能する理由は、setTimeout()によって呼び出される関数として、reqMak 'now'を呼び出すことも、後で呼び出すこともないことです。それは、後で実行するために、匿名関数_()=>{}_をsetTimeout()に渡します。そして、setTimeout()が2秒後に関数を実行すると、匿名関数はthis.reqMak()を1回呼び出します。

0
James Huddle