如何在按钮单击时更新 state 以响应原生 expo

Question

I used react-native-countdown-timer component. I have used useEffect previously to start timer which is running perfectly but when I change to on press function react state is not updating

This is the Code of Component

const [totalDuration, setTotalDuration] = useState(0);

const OnCountDown = () => {
    var date = moment().format("YYYY-MM-DD hh:mm:ss");
    var expirydate = moment().add(4, "hours").format("YYYY-MM-DD hh:mm:ss"); //You can set your own date-time
    console.log(date);
    console.log(expirydate);
    var diffr = moment.duration(moment(expirydate).diff(moment(date)));
    var hours = parseInt(diffr.asHours());
    var minutes = parseInt(diffr.minutes());
    var seconds = parseInt(diffr.seconds());
    var d = hours * 60 * 60 + minutes * 60 + seconds;
    setTotalDuration(d);
  };



<IconButton
              icon={"qrcode-scan"}
              size={40}
              onPress={() => {
                setOnline(true);
                OnCountDown();
              }}
            />

<CountDown
          until={totalDuration}
          timeToShow={["H", "M", "S"]}
          onFinish={() => alert("finished")}
          // onPress={() => alert("hello")}
          size={20}
        />

Answer 1

I think your requirement is to start counter on a button press and you couldn't achieve that because there isn't any option for start the counter for react-native-countdown-timer component since its working is to provide duration on initial phase and it will auto start. So to achieve what you want there were some alternative libraries

1. react-native-flip-countdown-timer : which have play props and

2. react-native-stopwatch-timer : which have start props

which are boolean, you can set this to true on button press.