如何通过单击按钮而不是在页面加载时开始倒数计时器来启动我的倒数计时器？

Question

在我的代码下方，我有一个计时器，它会在页面加载后立即开始倒计时。我试图在按下按钮后使用 onClick 启动倒计时，但在页面加载后它仍在开始。如何让它在点击时启动？

import * as React from "react";
import { render } from "react-dom";
import { View, Switch, StyleSheet, Text, Button, TouchableOpacity } from "react-native";

import CircularProgressBar from '../components/CircularProgressBar';

function SimpleTimer() {
  const [counter, setCounter] = React.useState(60);

  function timer () {
    React.useEffect(() => {
        counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
      }, [counter]);
    
  }

  return (
    <View className="App">
      <Text>Countdown: {counter}</Text>
      <CircularProgressBar percent={counter}></CircularProgressBar>
      <TouchableOpacity><Button style={styles.button} title='start timer' onPress={timer()}></Button></TouchableOpacity>
    </View>
  );
}


export default SimpleTimer;

Answer 1

我不知道你为什么要使用 useEffect，你应该仔细检查它的用例。除此之外你是：

function SimpleTimer() {
  const [counter, setCounter] = React.useState(60);
  const [intervalId, setIntervalId] = React.useState(null)

  function timer () {
    if (counter > 0) {
        const id = setInterval(() => setCounter(counter - 1), 1000);
        setIntervalId(id)
    }
  }

  return (
    <View className="App">
      <Text>Countdown: {counter}</Text>
      <CircularProgressBar percent={counter}></CircularProgressBar>
      <TouchableOpacity><Button style={styles.button} title='start timer' onPress={timer}></Button></TouchableOpacity>
    </View>
  );
}

除了 useEffect 问题，启动时触发计时器的是行 onPress={timer()}。这是一个拼写错误，您不想运行在渲染时起作用，但是当按下按钮时，您应该 onPress={timer} 或 onPress={() => timer()}.

尽我所能用我的英语:D

如何通过单击按钮而不是在页面加载时开始倒数计时器来启动我的倒数计时器？

How can I initiate my countdown timer with a button click instead of it starting on page load?

callback

reactjs

react-native