Question

我试图用React实现秒表应用。一切都已实施，看起来现在正在发挥作用。但是，当我单击停止按钮然后再次启动按钮时，NaN的结果显示在页面上。有没有想法解决这个问题？

我认为我应该在某些时候将数据类型从String更改为Number。我尝试使用Number（）来解决问题，但它没有用。

＆＃13;

import React from "react";
import { render } from "react-dom";

class Stopwatch extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      startTime: 0,
      elapsedTime: 0,
      timerId: null,
      isRunning: false,
      timeToAdd: 0
    };
  }

  updateTimerText = () => {
    const m = Math.floor(this.state.elapsedTime / 60000);
    const s = Math.floor((this.state.elapsedTime % 60000) / 1000);

    this.setState({
      elapsedTime: m + ":" + s
    });
  };

  countUp = () => {
    this.setState({
      timerId: setTimeout(() => {
        // this.state.elapsedTime = Date.now() - this.state.startTime;
        this.setState({
          elapsedTime: Date.now() - this.state.startTime + this.state.timeToAdd
        });
        this.updateTimerText();
        this.countUp();
      }, 100)
    });

    this.state.timerId;
  };

  handleStart = () => {
    if (this.state.isRunning === true) {
      return;
    }
    this.setState({
      isRunning: true
    });
    this.setState({
      startTime: Date.now()
    });
    this.countUp();
  };

  handleStop = () => {
    if (this.state.isRunning === false) {
      return;
    }
    this.setState({
      isRunning: false
    });
    this.setState({
      timeToAdd: this.timeToAdd + (Date.now() - this.state.startTime)
    });
    clearTimeout(this.state.timerId);
  };

  handleReset = () => {
    if (this.state.isRunning === true) {
      return;
    }
    this.setState({
      elapsedTime: 0
    });
  };

  render() {
    return (
      <div>
        <div>{this.state.elapsedTime}</div>

        <button onClick={this.handleStart}>Start</button>

        <button onClick={this.handleStop}>Stop</button>

        <button onClick={this.handleReset}>Reset</button>
      </div>
    );
  }
}

render(<Stopwatch />, document.getElementById("root"));

＆＃13;

Answer 1

在您引用handleStop的{{1}}方法中，我认为您的意思是this.timeToAdd。尝试将相关行更改为：

this.state.timeToAdd

我建议不要使用字符串覆盖timeToAdd: this.state.timeToAdd + (Date.now() - this.state.startTime)状态键中的数字，而是建议添加新密钥......类似elapsedTime。您可以将此状态键设置为要在elapsedTimeFormatted方法中呈现的字符串，然后在渲染方法中引用它而不是updateTimerText。

作为参考，当尝试从字符串中获取数字时，您可能需要elapsedTime。有关更多信息，请访问MDN

Answer 2

在parseInt中看起来问题只是一个被遗忘的小状态：

handleStop

应该是

this.setState({
    timeToAdd: this.timeToAdd + (Date.now() - this.state.startTime)
});

另一方面，在进行此更改后，重置并未实际重置秒表，因为timeToAdd保持不变。不确定这是否是预期的行为，但如果不是，那么重置需要

this.setState({
    timeToAdd: this.state.timeToAdd + (Date.now() - this.state.startTime)
});

Answer 3

感谢您处理我的问题！我无法得到我的预期的原因是我忘了在handleStop中使用状态访问

另一个发现的错误是handleReset。我需要重置timeToAdd。

使用秒表应用程序获取NaN React

3 个答案: