在 React-Native 中转换回人类友好的计时器格式

Question

我的一个反应本机组件中有一个计时器运行。它使用以下代码按预期工作：

const visitItemCounter = (value) => {
  const [duration, setCounter] = useState(moment.duration(value).asMilliseconds());
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('duration: ', duration);
      setCounter(duration => duration + 1000);
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []); 

  return (
    <View>
      <Text style={styles.texts.mediumText}>{ duration }</Text>
    </View>
  );
}

顺便说一句，在控制台中我看到以下内容，以毫秒为单位的值：

duration:  65849000

因此该值每秒增加 1000，如预期和期望的那样。

我现在想做的就是使用 moment.js 将显示从毫秒转换为典型的、人性化的格式。

现在，在最后的显示中，我想转换回人性化的格式。为此，我执行以下操作。我只是改了一行：

setCounter(duration => duration + 1000);

对此：

  setCounter(duration => moment.utc(duration + 1000).format('HH:mm:ss'));

所以整个块现在看起来像这样：

const visitItemCounter = (value) => {
  console.log('counter running with duration: ', value);
  // let duration = moment.utc(props.item.duration).format('HH:mm:ss');
  const [duration, setCounter] = useState(moment.duration(value).asMilliseconds());
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('duration 42: ', duration);
      setCounter(duration => moment.utc(duration + 1000).format('HH:mm:ss'));
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []); // Pass in empty array to run effect only once!

  return (
    <View>
      <Text style={styles.texts.mediumText}>{ duration }</Text>
    </View>
  );
}

我认为这行得通，但是当我正确地将初始值打印到屏幕上时，当它递增到下一个值时，打印出来的是：invalid date

我在这里错过了什么？

Answer 1

您不想将持续时间本身设置为格式化输出（因为当您执行 moment.utc(duration + 1000).format('HH:mm:ss') 时，它会尝试执行 moment.utc("12:34:12" + 1000)，这会给您一个无效的日期。

相反，只需在输出时格式化字符串即可：

 console.log('duration 42: ', moment.utc(duration).format('HH:mm:ss'));
 <Text style={styles.texts.mediumText}>{ moment.utc(duration).format('HH:mm:ss') }</Text>

在 React-Native 中转换回人类友好的计时器格式

Converting Back to Human-Friendly Timer Format in React-Native

momentjs

reactjs

react-native