JavaScript 函数的逆序 - React Native

Question

我正在尝试计算一秒钟内按下按钮的次数。

它在工作，在大多数情况下，它会跟踪并输出它。

但问题是它输出的是上一秒而不是当前秒的按钮按下次数。

我认为如果以某种方式颠倒顺序会起作用，我该如何修复这些功能？谢谢。

    const [clicksPerSecond, setClicksPerSecond] = useState(0);
    const [tempCounter, setTempCounter] = useState(0);
    const [tempCounter2, setTempCounter2] = useState(0);
    const { setCounter, counter } = useContext(CountContext);

    const delay = ms => new Promise(res => setTimeout(res, ms));

    const cpsFunction = async (temp) => {
        if (temp == 1) {
            await delay(1000);
            setClicksPerSecond(tempCounter2);
            setTempCounter(1);
            console.log('Clicks per second final: ' + tempCounter2);
        } else {
            setTempCounter2(temp);
            console.log('Clicks per second: ' + temp);
        }
    }

    useEffect(() => {
        cpsFunction(tempCounter);
        setTempCounter(tempCounter + 1);
    }, [counter])

return (
        <View style={[styles.container, { backgroundColor: colors.background }]}>
            <View elevation={7.5} style={{ backgroundColor: colors.background, borderRadius: 500 }}>
                <TouchableOpacity
                    onPress={() => setCounter(counter + 1)}
                    style={[styles.counterButton, { backgroundColor: colors.primary, borderColor: colors.container, borderWidth: 0 }]}>
                    <Text></Text>
                    <Text style={{ fontSize: 60 }}>{counter}</Text>
                    <Text>{clicksPerSecond} CPS</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

Answer 1

您可以改为只增加计数并在一秒钟后减少它。

export default function App() {
  const [clicks, setClicks] = React.useState(0);

  const onClick = () => {
    setClicks((c) => c + 1);
    setTimeout(() => setClicks((c) => c - 1), 1000);
  };

  return (
    <div>
      <button onClick={onClick}>Click me</button>
      <p>Clicked {clicks} times</p>
    </div>
  );
}

您还需要跟踪组件在递减之前是否已卸载，我认为您可以使用 refs 来完成。 Example