Javascript 在我的倒计时钟上用NaN代替数字？

我正在创建一个倒计时时钟，它对提供的日期之前的天、小时、分钟和秒进行倒计时。我有倒计时功能，但只有在我的

getTimeNow（）

函数中手动输入日期时才可以。当我给函数一个参数“deadline”，然后在“time”变量中使用该参数时，它返回为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;

从“React”导入React，{Component}；
导入“./Countdown.css”；
类时钟扩展组件{
建造师（道具）{
超级（道具）；
此.state={
天数：0，
小时:0，
分钟:0，
秒：0
}
}
组件willmount（）{
this.getTimeNow（this.props.deadline）；
}
componentDidMount（）{
setInterval（（）=>this.getTimeNow（this.props.deadline），1000；
}
getTimeNow（截止日期）{
const time=Date.parse（截止日期）-新日期（）；
常数秒=数学地板（（时间/1000）%60）；
常数分钟=数学楼层（（时间/1000/60）%60）；
常数小时=数学楼层（时间/（1000*60*60）%24）；
施工天数=数学楼层（时间/（1000*60*60*24））；
this.setState（{天，小时，分钟，秒}）；
}
render（）{
返回(
{this.state.days}：天
{this.state.hours}：小时
{this.state.minutes}：分钟
{this.state.seconds}：秒
)
}
}
输出默认时钟；

倒计时.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;

import React，{Component}来自'React'；
从“./Clock”导入时钟；
导入“./Countdown.css”；
类倒计时扩展组件{
建造师（道具）{
超级（道具）；
此.state={
截止日期：“2020年11月16日”，
新截止日期：“”
}
}
更改截止日期（）{
this.setState（{deadline:this.state.newDeadline}）；
}
render（）{
返回(
{本州.截止日期}倒计时
this.setState（{newDeadline:event.target.value}）
/>
this.changeDeadline（）}>提交
)
}
}
出口默认倒计时；

---

我希望输出是从天到秒的倒计时，但我每次都得到NaN。我还希望，当用户输入新日期时，倒计时会发生相应的变化。

因为您没有提供完整的代码示例，如何使用组件时钟组件，回答可能会很棘手。但最有可能的是，你们把错误的事情作为最后期限。若您查看MDN，将采用日期的字符串表示形式，并以毫秒为单位返回数字。但是，如果无法识别字符串，它将返回NaN

---

尝试将类似“2020年3月21日”的内容传递给date prop，它应该会起作用。

我们可以看到您正在解析的日期字符串是什么吗。问题可能就在这里。关于在

组件willmount（）中调用
this.getTimeNow（）
的具体原因是什么？另外，找一个很棒的datetime库。这就是我被指示要做的。这是不对的吗？但最有可能的是，你们把错误的东西作为最后期限。是的，你是对的，但是当我这样做时，当你在输入字段中更改日期时，它不会更新倒计时。这就是我被难住的地方。