Reactjs 在React Native中转换回人性化计时器格式

我的react原生组件中有一个计时器正在运行。它按预期工作，代码如下：

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>
  );
}

因此，正如预期和期望的那样，该值每秒增加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>
  );
}

const visitItemCounter=（值）=>{
log（'计数器在持续时间内运行'，值）；
//让持续时间=矩.utc（props.item.duration）.format（'HH:mm:ss'）；
const[duration，setCounter]=useState（矩.持续时间（值）.asmillseconds（））；
useffect（（）=>{
常量计时器=设置间隔（（）=>{
console.log（'duration 42:'，duration）；
setCounter（持续时间=>time.utc（持续时间+1000）.format（'HH:mm:ss'）；
}, 1000);
return（）=>{
清除间隔（计时器）；
};
}，[]）；//传入空数组仅运行一次效果！
返回(
{duration}
);
}

我认为这是可行的，但当我正确地将初始值打印到屏幕上时，当它增加到下一个值时，将打印：

invalid date

---

我在这里遗漏了什么？

您不想将持续时间本身设置为格式化输出（因为当您执行

矩.utc（持续时间+1000）.format（'HH:mm:ss'）

时，它将尝试执行

矩.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>

console.log（'duration 42:'，moment.utc（duration.format（'HH:mm:ss'））；
{moment.utc（duration.format（'HH:mm:ss'）}

这给了我一个不同的错误：

duration.format不是一个函数

？对不起，应该是

time.utc（duration.format

完美！非常感谢，@Dave。

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