Question

import React, { Component } from 'react';
import { Text, View, TextInput, Button, Alert, Switch } from 'react-native';
import TimerMixin from 'react-timer-mixin';

export default class home extends React.Component {
  constructor(props) {
    super(props)
    this.state = { switchstate: false, timer: null };
    var timer = setInterval(this.tick, 1000);
    this.setState({ timer });
  }
  tick = async () => {
    return await console.log('asdas', 'iam printing')
  }

  toogleswitchstate = () => {
    if (this.state.switchstate == false) {
      this.setState({ switchstate: true })
    } else if (this.state.switchstate == true) {
      this.setState({ switchstate: false })
      clearInterval(this.timer);
      //geolocation.stopObserving();
    }
    console.log(this.state.switchstate)
  }

  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center', backgroundColor: datum.secondaryColor }}>
        <Button
          title={String(this.state.switchstate)}
          onPress={() => this.toogleswitchstate()}
        />
      </View>
    );
  }
}

我设计了这段代码来在执行此组件时触发计时器，但是我不知道如何停止计时器，我已经裁剪了用于堆栈溢出限制的代码

预期行为： toogleswitchstate函数将停止计时器

实际发生的情况： 抛出一个奇怪的错误

Answer 1

这是工作代码

在代码中更正：-

1）setInterval是副作用，因此应该在componentDidMount中。

2）不需要将计时器填充为状态变量，因为它是一个实例变量。

3）变量名应采用驼峰式大小写，如switchState而不是switchstate。

4）如果尚未删除componentWillUnmount中的计时器，则将其删除。

import * as React from 'react';
import { Text, View, TextInput, Button, Alert, Switch } from 'react-native';
import TimerMixin from 'react-timer-mixin';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { switchState: false };
  }
  componentDidMount(){
    this.timer = setInterval(this.tick, 5000);
  }
  tick = async () => {
   await console.log('asdas', 'iam printing');
  }
  toogleSwitchState = () => {
    clearInterval(this.timer);
    if (this.state.switchState == false) {
      this.setState({ switchState: true })
    } else {
      this.setState({ switchState: false })
      //geolocation.stopObserving();
    }
  }
  componentWillUnmount() {
    if (this.timer) clearInterval(this.timer)
  }
  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center', backgroundColor: datum.secondaryColor }}>
        <Button
          title={String(this.state.switchState)}
          onPress={() => this.toogleSwitchState()}
        />
      </View>
    );
  }
}

请注意，为什么要在开关状态为true时清除计时器。如果不是那样的话，您可以简单地写

this.setState({
    switchState: !this.state.switchState
})

切换switchState。

希望有帮助！

如何在React Native中停止计时器

1 个答案: