Question

我具有此功能，可以在拍子中添加拍手。我不想为每个鼓掌添加一个鼓掌，因为这在我的mysql服务器上非常疯狂，更不用说http请求并重新渲染了。相反，我只想让拍手加起来，并且只有在用户停止添加拍手几秒钟后，再将拍手添加到数据库中。因此，我的函数将拍手正确存储在状态中，但是每次都在运行该函数，并且永远不会清除超时。

  let sendClapsToDB

  _clapForPost = (postId) => {

    clearTimeout(sendClapsToDB)

    setClaps(() => claps + 1)

    sendClapsToDB = setTimeout(() => {
      _addClapsToPost(claps, postID)
    }, 5000)
  }

有人知道如何正确执行此操作吗？我正在使用React Native和获取。每次用户按下按钮时都会调用_clapForPost函数。

Answer 1

如果您使用的是类组件，则可以尝试类似的操作。

import React from "react";


class App extends React.Component {
  state = {claps: 0}
  timeout = null;
  sendClap = () => {
    this.setState({claps: this.state.claps + 1})
    if(!this.timeout){
      this.timeout = setTimeout(() => {
        console.log("Send claps", this.state.claps);
        clearTimeout(this.timeout);
        this.timeout = null;
      }, 3000)
    }
  }

  render(){
    console.log(this.state.claps);
    return <button onClick={this.sendClap}>Clap</button>

  }
}

export default App;

在计时器运行时清除计时器，并在下一个状态更新中重新初始化。卸载组件时还需要清除计时器。

如果您将功能组件与挂钩一起使用，则可以尝试类似

import React, {useState, useRef} from "react";


export default () => {
  const [claps, setClaps] =  useState(0);
  const clapsRef = useRef(0);
  clapsRef.current = claps;
  const timeout = useRef(null);
  const sendClap = () => {
    setClaps(claps + 1);
    if(!timeout.current){
      timeout.current = setTimeout(() => {
        console.log("Send claps", clapsRef.current);
        clearTimeout(timeout.current);
        timeout.current = null;
      }, 3000)
    }
  }

    console.log(claps);
    return <button onClick={sendClap}>Clap</button>

}

在这里，我正在使用useState重新呈现该组件，并使用useRef捕获最新状态以获取超时，以获取最新状态参考。

如何正确清除超时

1 个答案: