reactjs倒计时组件在IOS设备上返回NaN

Question

我正在尝试实现一个为我的项目执行hh：mm：ss倒计时的组件。首先，我使用this库为我计算和渲染时间。它在任何设备上都很完美，但iOS会返回

NaN：NaN：NaN

。我认为这个模块有问题所以我试着实现自己的倒计时组件。所以我尝试了下面的代码：

import React from 'react';
import PropTypes from 'prop-types';

class Countdown extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            days: 0,
            hours: 0,
            min: 0,
            sec: 0
        };
    }

    componentDidMount() {
        // update every second
        let i = 0;
        this.interval = setInterval(() => {
            let date = this.calculateCountdown(this.props.date, ++i);
            date ? this.setState(date) : this.stop();
        }, 1000);
    }

    componentWillUnmount() {
        this.stop();
    }

    calculateCountdown(endDate , count) {
        let diff = (endDate - (count * 1000)) / 1000;
        // clear countdown when date is reached
        if (diff <= 0) return false;

        const timeLeft = {
            years: 0,
            days: 0,
            hours: 0,
            min: 0,
            sec: 0,
            millisec: 0
        };

        // calculate time difference between now and expected date
        if (diff >= (365.25 * 86400)) { // 365.25 * 24 * 60 * 60
            timeLeft.years = Math.floor(diff / (365.25 * 86400));
            diff -= timeLeft.years * 365.25 * 86400;
        }
        if (diff >= 86400) { // 24 * 60 * 60
            timeLeft.days = Math.floor(diff / 86400);
            diff -= timeLeft.days * 86400;
        }
        if (diff >= 3600) { // 60 * 60
            timeLeft.hours = Math.floor(diff / 3600);
            diff -= timeLeft.hours * 3600;
        }
        if (diff >= 60) {
            timeLeft.min = Math.floor(diff / 60);
            diff -= timeLeft.min * 60;
        }
        timeLeft.sec = Math.floor(diff);

        return timeLeft;
    }

    stop() {
        clearInterval(this.interval);
    }

    addLeadingZeros(value) {
        value = String(value);
        while (value.length < 2) {
            value = '0' + value;
        }
        return value;
    }

    convertToPersianNumber = (time) => {
        let persianDigits = '۰۱۲۳۴۵۶۷۸۹';
        let persianMap = persianDigits.split('');
        return time.replace(/\d/g, m => persianMap[parseInt(m)]);
    };

    render() {
        const countDown = this.state;

        return (
            <div className="Countdown">
                <span className="Countdown-col">
                    <span className="Countdown-col-element">
                        {countDown.hour}
                        {/*{this.convertToPersianNumber(this.addLeadingZeros(countDown.hours))}:*/}
                    </span>
                </span>

                <span className="Countdown-col">
                      <span className="Countdown-col-element">
                          {countDown.min}
                          {/*{this.convertToPersianNumber(this.addLeadingZeros(countDown.min))}:*/}
                      </span>
                </span>

                <span className="Countdown-col">
                      <span className="Countdown-col-element">
                          {countDown.sec}
                          {/*{this.convertToPersianNumber(this.addLeadingZeros(countDown.sec))}*/}
                      </span>
                </span>
            </div>
        );
    }
}

Countdown.propTypes = {
    date: PropTypes.number.isRequired
};

Countdown.defaultProps = {
    date: 0
};

export default Countdown;

在这个组件中，我以毫秒为单位传递结束时间并按间隔计算时间，最后我将其转换为波斯语字符串并打印出来。

<div className={styles.bottomContainer}>
                    {/*<Moment>{remainTime}</Moment>*/}
    <CountDown onComplete={() => this.setState({ timerEnd: true })}
               date={remainTime}/>
</div>

我还有同样的问题：在iOS设备中我得到了

NaN:00:00

如果你可以帮助我，我的问题是什么？我必须补充一点，我清除转换并试图打印只是数字，它不起作用;