React.js getTimeUntil返回Nan

Question

我正在遵循一個教程嘗試學習React.js。 這是一個倒計時的應用程序。 當我嘗試運行它時，時間回到Nan（不是數字）。 我不確定自己在做什么錯。

import React, { Component } from "react";
import "./App.css";

class Clock extends Component {
  constructor(props) {
   super(props);
   this.state = {
     days: 0,
     hours: 0,
     minutes: 0,
     seconds: 0
   };
  }

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

  getTimeUntil(deadline) {
    const time = Date.parse(deadline) - Date.parse(new Date());
    console.log("time", time);
    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="Clock-days">{this.state.days} Days</div>
        <div className="Clock-hours">{this.state.hours} Hours</div>
        <div className="Clock-minutes">{this.state.minutes} Mins</div>
        <div className="Clock-seconds">{this.state.seconds} Secs</div>
     </div>
    );
   }
  }

 export default Clock;

我在App.jsx文件中定義了截止日期。請檢查以下文件中的代碼：

import React, { Component } from "react";
import Clock from "./Clock";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
     deadline: "December 25, 2017",
     newDeadline: ""
   };
 }

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

  render() {
    return (
      <div className="App">
        <div className="App-title">Countdown to {this.state.deadline}
          </div>
           <div>
            <Clock dealine={this.state.deadline} />
           </div>
         <div>
          <input
           placeholder="new date"
            onChange={event =>
             this.setState({ newDeadline: event.target.value })}
         />
         <button onClick={() => this.changeDeadline()}>Submit</button>
       </div>
     </div>
   );
 }
}

export default App;

感謝您在幫助React新手方面的幫助。

Answer 1

我忘記了截止日期app.jsx文件中的第二個“ d”。

謝謝您的幫助。