是否可以在 React 的静态 getDerivedStateFromPROps 方法中使用 ClearInterval？

Question

我设置了一个 Interval 并在 ComponentDidMount 方法中做了一些操作。我想在 props.status 完成后清除 Interval。

class A extends React.PureComponent {
 constructor(props) {
  super(props);
  this.intervalTimer = '';
}

componentDidMount() {
  this.intervalTimer = setTimeout(() => {
    // do something;
}, 3000);
}

static getDerivedStateFromProps(np, ps) {
 if(np.status === 'completed') {
  clearInterval(A.intervalTimer);
}
}
}

Answer 1

您可以创建静态变量并在 getDerivedStateFromProps 生命周期方法中使用它。

这里intervalTimer是静态方法内部可以访问的变量

这是工作代码：-

import React from "react";
import ReactDOM from "react-dom";

let intervalTimer = "";
class App extends React.PureComponent {
  state = {
    stop: false
  };
  componentDidMount() {
    intervalTimer = setInterval(() => {
      console.log("interval going on");
    }, 3000);
  }
  handleClick = () => {
    this.setState({ stop: true });
  };
  static getDerivedStateFromProps(props, state) {
    if (state.stop) {
      clearInterval(intervalTimer);
    }
    return null;
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Stop interval</button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

或者你也可以使用静态变量而不是全局变量

  static intervalTimer = ''

  componentDidMount() {
    App.intervalTimer = setInterval(() => {
      console.log("interval going on");
    }, 3000);
  }

  static getDerivedStateFromProps(props, state) {
    if (state.stop) {
      clearInterval(App.intervalTimer);
    }
    return null;
  }

这两种方法都可以正常工作。

希望对您有所帮助！！！

Answer 2

您不应允许 getDerivedStateFromProps 更改 none 静态变量或调用 none 静态方法。最好从那里 return 新状态。我的建议是使用不同的生命周期方法，例如

componentDidUpdate(prevProps) {
  // compare status props and clear timer
  if (this.props.status === 'completed') {
   clearInterval(this.intervalTimer);
  }
}

保险起见也把里面清理一下

componentWillUnmount(){
 clearInterval(this.intervalTimer)
}

是否可以在 React 的静态 getDerivedStateFromPROps 方法中使用 ClearInterval？

Is it possible to use ClearInterval inside static getDerivedStateFromPRops method in React?

lifecycle

reactjs