在我的倒计时时钟上获取NAN而不是数字

Question

我正在创建一个倒数时钟，该时钟降低了天数，小时，分钟和秒钟，直到提供的日期。我的倒计时工作正常，但是只有我在getTimeNow()函数中手动输入日期。当我将函数提供一个"截止日期"的参数，然后在"时间"变量中使用该参数时，它会返回为NAN。我知道我缺少一些东西，但我不知道什么。

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

注意：该应用程序尚未完成，我仍然有一些重构要做，但此时仍应正确工作。

clock.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;

Countdown.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日"之类的东西传递到截止日期，它应该起作用。