反應原生區間問題

嗨，我對本機反應還是很陌生，我正在構建一個帶有倒計時的小應用程式。我很絕望，只??是不明白我應該怎么做才能解決這個問題。就像這樣我有一個按鈕，按下時應該從設定中設定的秒數倒計時到格式 00:00:00 它實際上起初作業得很好但是一旦我嘗試再次通過按鈕或它停止倒計時自行轉動然后它不再正常作業并且倒計時不正確有誰知道問題出在哪里以及我如何修復這個我的代碼：

當我單擊按鈕時，我運行以下代碼：

const sendData = () => {
setSendState(!sendState);

var seconds = state.count;
console.log('Seconds '   state.count);
if (sendState) {
  clearInterval(intervalId);
  setIntervalId(0);
  return;
}

倒計時間隔：

const newIntervalId = setInterval(() => {
  
  let days = Math.floor(seconds / 24 / 60 / 60);
  let hoursLeft = Math.floor(seconds - days * 86400);
  let hours = Math.floor(hoursLeft / 3600);
  let minutesLeft = Math.floor(hoursLeft - hours * 3600);
  let minutes = Math.floor(minutesLeft / 60);
  let remainingSeconds = seconds % 60;
  let newpoutn;
  let percent = (remainingSeconds * 1000) / 100;
  setProgress(percent);
  const pad = n => {
    return n < 10 ? '0'   n : n;
  };
  setTime(`${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`);
  if (seconds == 0) {
    clearInterval(intervalId);
    setIntervalId(0);
    setSendState(false);
    return;
  } else {
    seconds--;
  }
}, 1000);
setIntervalId(newIntervalId);
clearInterval(intervalId);

};

uj5u.com熱心網友回復：

我通常使用 useRef 存盤我的間隔 id，以避免不得不處理導致問題的重新渲染。不確定是否有必要，但是當我這樣做時我不會遇到問題。我通常還有一個布爾狀態變數，用于打開和關閉間隔，我用useEffect

import React, { useState, useRef, useEffect } from 'react';
import { Text, View, StyleSheet, Switch, Button } from 'react-native';
import Constants from 'expo-constants';

const secondRatios = {
  minute: 60,
  hour: 3600,
  day: 3600 * 24,
};
const formatSeconds = (s) => {
  const days = Math.floor(s / secondRatios.day)
    .toString()
    .padStart(2, '0');
  const hours = Math.floor(s / secondRatios.hour)
    .toString()
    .padStart(2, '0');
  const minutes = Math.floor(s / secondRatios.minute)
    .toString()
    .padStart(2, '0');
  const seconds = (s % 60).toString().padStart(2, '0');
  return `${days}:${hours}:${minutes}:${seconds}`;
};
const targetSeconds = 10;

export default function App() {
  // im not sure what you are using sendState for,
  // but im using it as marker of whether the interval
  // is running 
  const [sendState, setSendState] = useState(true);
  const [seconds, setSeconds] = useState(targetSeconds);
  const [progress, setProgress] = useState(0);
  const intervalId = useRef(null);
  const startInterval = () => {
    console.log('starting interval');
    intervalId.current = setInterval(() => {
      // im using the function form of the setter
      // because using seconds was providing stale values
      setSeconds((prev) => {
        let s = prev - 1;
        setProgress((targetSeconds - s) / targetSeconds);
        if (s <= 0) setSendState(false);
        return s;
      });
    }, 1000);
  };
  // interval operation is now directly linked to sendState
  useEffect(() => {
    if (sendState) startInterval();
    else clearInterval(intervalId.current);
  }, [sendState]);
 
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{(progress * 100).toFixed(2)}%</Text>
      <Text style={styles.text}>{formatSeconds(seconds)}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  text: {
    textAlign: 'center',
    fontSize: 18,
  },
});

世博小吃

標籤：反应式设置间隔

上一篇：是否可以使用React-JavaScript網頁阻止網頁？

下一篇：在我在AVD模擬器上卸載以前的應用程式后，React-nativerun-android命令失敗