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

Question

我的一个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>
);
}

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

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>