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

Question

在我的代码下面，我有一个计时器，它会在页面加载后立即开始倒计时。我正在尝试使用 onClick 在按下按钮后启动倒计时，但在页面加载后它仍在启动。如何让它启动 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