Question

我正在尝试制作一个简单的时钟，该时钟可以通过按一个按钮来启动和停止。在这里，我设置了一个等于setInterval的变量，以便以后可以清除它。但是由于某种原因，它在没有按下按钮的情况下被调用。

在这里，当我按下“开始”按钮时应该已经调用了autoInc，但是无论如何它都会被调用。

import React, { Component } from "react";
import { Text, View, Button } from "react-native";

export default class Counter extends Component {
  increaser = () => {
    this.setState(prePre => {
      return { counter: prePre.counter + 1 };
    });
  };

  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
      wantToShow: true
    };
    autoInc = setInterval(this.increaser, 1000);
  }

  render() {
    if (this.state.wantToShow)
      return (
        <View>
          <Text style={{ color: "red", fontSize: 50, textAlign: "center" }}>
            {this.state.counter}
          </Text>
          <Button title="Start" onPress={this.autoInc} />
        </View>
      );
  }
}

Answer 1

这里有一个完整的react示例，您只需要翻译本机中的函数即可。

在构造函数中创建一个变量this.interval=null，在startFn中为其指定时间间隔，然后使用window.clearInterval(this.interval);删除它

export default class App extends Component {
  constructor(props) {
    super(props);
    this.interval = null;
  }

  componentDidMount() {}

  startFn = () => {
    console.log("assign and start the interval");
    this.interval = setInterval(this.callbackFn, 1000);
  };

  stopFn = () => {
    console.log("clear interval");
    window.clearInterval(this.interval);
  };

  callbackFn = () => {
    console.log("interval callback function");
  };

  render(props, { results = [] }) {
    return (
      <div>
        <h1>Example</h1>
        <button onClick={this.startFn}>start Interval</button>
        <button onClick={this.stopFn}>stop Interval</button>
      </div>
    );
  }
}

此处为Codesandbox示例：https://codesandbox.io/s/j737qj23r5

Answer 2

在构造函数中，您调用 setInterval(this.increaser,1000)，然后将其返回值分配给 global属性 autoInc。
渲染函数中的this.autoInc是undefined。

看起来

autoInc = setInterval(this.increaser,1000)

只是写错了，而您想要的是：

this.autoInc = () => setInterval(this.increaser,1000)

为什么在React Native中会自动调用setInterval

2 个答案: