Можно ли использовать ClearInterval внутри статического метода getDerivedStateFromPRops в React? - PullRequest
Новая
       10

Можно ли использовать ClearInterval внутри статического метода getDerivedStateFromPRops в React?

0 голосов
/ 04 октября 2019

Я установил интервал и выполнил некоторую операцию внутри метода ComponentDidMount. Я хочу очистить интервал после того, как я получу props.status. 

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);
}
}
}

Ответы [ 2 ]

0 голосов
/ 04 октября 2019

Вы не должны позволять getDerivedStateFromProps изменять не статическую переменную или вызывать не статический метод. Лучше всего просто вернуть новое состояние оттуда. Мое предложение будет для вас использовать другой метод жизненного цикла, например 

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

, чтобы быть в безопасности, также выполните очистку внутри 

componentWillUnmount(){
 clearInterval(this.intervalTimer)
}
0 голосов
/ 04 октября 2019

Вы можете создать статическую переменную и использовать ее в 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;
  }

Оба подхода будут работать очень хорошо.

Надеюсь, это поможет !!!

...