如果setInterval两次调用，则本机clearInterval无法正常工作

Question

我正在尝试使用React Native构建秒表类的应用程序。为简单起见，我有一个时间显示，开始按钮和停止按钮。

当我按下开始按钮时，时间开始计时。当我按下“停止”按钮时，时间停止了。

问题是，如果我按启动按钮两次，则“停止”按钮停止工作，并且时间继续计数。

我非常怀疑这很重要，但是我在macOS和Android Studio Emulator以及我的物理设备上都使用了Expo。他们两个都遇到了这个问题。

任何帮助将不胜感激。

import React from 'react';
import { Text, View, TouchableOpacity} from 'react-native';
import moment from 'moment';

function Timer ({interval}) {
  const duration = moment.duration(interval);
  const pad = (n) => {
    return n < 10 ? '0' + n : n;
  };

  return <Text>
    {pad(duration.hours())}:{pad(duration.minutes())}:{pad(duration.seconds())}
  </Text>
}

function Button({title, onPress}) {
  return <TouchableOpacity onPress={onPress}>
    <View>
      <Text>{title}</Text>
    </View>
  </TouchableOpacity>
}

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      now: 0,
      start: 0,
    }
  }

  start = () => {
    const now = new Date().getTime();
    this.setState({
      start: now,
      now: now,
    });

    this.timer = setInterval(() => {
      this.setState({
        now: new Date().getTime(),
      })
    }, 1000)
  };

  stop = () => {
    clearInterval(this.timer);
  };

  render() {
    const { now, start } = this.state;
    const timer = now - start;

    return (
      <View>
        <Timer interval={ timer }/>
        <Button
          title={'START'}
          onPress={this.start}
        />
        <Button
          title={'STOP'}
          onPress={this.stop}
        />
      </View>
    );
  }
}