javascript - 在我的倒计时时钟上获取 NaN 而不是数字？

Question

我正在创建一个倒计时时钟，用于倒计时天数、小时数、分钟数和秒数，直到提供的日期为止。我有倒计时工作，但前提是我在我的 getTimeNow() 函数中手动输入日期。当我给函数一个参数“deadline”然后在“time”变量中使用该参数时，它返回为 NaN。我知道我错过了一些东西，但我不知道是什么。

我已经尝试重新格式化该函数以获得正确的日期格式，但是我无法通过输入字段更新原始日期。

注意:该应用尚未完成，我还有一些重构工作要做​​，但此时它应该仍能正常工作。

时钟.jsx

import React, { Component } from 'react';
import './Countdown.css';

class Clock extends Component {
  constructor(props) {
    super(props);

    this.state = {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    }
  }

  componentWillMount() {
    this.getTimeNow(this.props.deadline);
  }

  componentDidMount() {
    setInterval(() => this.getTimeNow(this.props.deadline), 1000);
  }

  getTimeNow(deadline) {
    const time = Date.parse(deadline) - new Date();
    const seconds = Math.floor((time/1000)%60);
    const minutes = Math.floor((time/1000/60)%60);
    const hours = Math.floor(time/(1000 * 60 * 60) % 24);
    const days = Math.floor(time/(1000 * 60 * 60 * 24));

    this.setState({days,hours, minutes, seconds});
  }

  render() {

    return (
      <div>
        <div className="days">{this.state.days}: days</div>
        <div className="hours">{this.state.hours}: hours</div>
        <div className="minutes">{this.state.minutes}: minutes</div>
        <div className="seconds">{this.state.seconds}: seconds</div>
      </div>
    )
  }
}

export default Clock;

倒计时.jsx

import React, { Component } from 'react';
import Clock from './Clock';
import './Countdown.css';

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

    this.state = {
      deadline: 'November 16, 2020',
      newDeadline: ''
    }
  }

  changeDeadline() {
    this.setState({deadline: this.state.newDeadline});
  }

  render() {
    return (

    <div className="Countdown">
        <div className="title">
            Countdown to {this.state.deadline}
      </div>

      <Clock />

      <div className="input">
      <input
        placeholder='new date'
            onChange={event => this.setState({newDeadline: event.target.value})}
        />
        <button onClick={() => this.changeDeadline()}>Submit</button>
      </div>
    </div>

    )
  }
}

export default Countdown;

我希望输出是从几天到几秒的倒计时，但我每次都得到 NaN。我还希望倒计时在用户输入新日期时适当更改。

Answer 1

因为你没有提供完整的代码示例，你是如何使用你的时钟组件的，回答可能会很棘手。但最有可能的是，您将错误的事情作为截止日期传递。如果你看看 MDN，Date.parse()接受日期的字符串表示并返回以毫秒为单位的数字。但是，如果无法识别字符串，它将返回 NaN。

尝试将诸如“2020 年 3 月 21 日”之类的内容传递给 deadline 属性，它应该会起作用。