Besseren Weg, um clearTimeout in componentWillUnmount

Ich habe einen Laden der Komponente, die bricht, wenn es wurde im laden für 8 Sekunden. Dieser code funktioniert, aber es fühlt sich aus mir und ich Frage mich, ob es gibt ein besserer Weg, dies zu tun.

Ohne Einstellung this.mounted bekomme ich die Fehlermeldung:

Achtung: Kann nur aktualisieren montiert oder bei der Montage des Bauteils. Dies bedeutet in der Regel, die Sie genannt setState, replaceState oder forceUpdate auf einer nicht gemounteten Komponente. Dies ist ein no-op. Bitte überprüfen Sie den code für das Laden der Komponente.

Diese machen mich glauben, dass der timer wird nicht immer abgebrochen, so geht es weiter mit this.seState. Warum wäre das, wenn ich clearTimeout im componentWillUnmount? Gibt es eine bessere Art das zu handhaben, als mit einem globalen this.mounted?

class Loading extends Component {
  state = {
    error: false,
  };

  componentDidMount = () => {
    this.mounted = true;
    this.timer();
  };

  componentWillUnmount = () => {
    this.mounted = false;
    clearTimeout(this.timer);
  };

  timer = () =>
    setTimeout(() => {
      (this.mounted && this.setState({ error: true })) || null;
    }, 8000);

  render() {
    const { showHeader = false } = this.props;
    const { error } = this.state;
    return (
      <View style={backgroundStyle}>
        {showHeader && <HeaderShell />}
        {!error &&
          <View style={loadingHeight}>
            <PlatformSpinner size="large" />
          </View>}
        {error && <Error code="service" />}
      </View>
    );
  }
}

Loading.propTypes = {
  showHeader: PropTypes.bool,
};

Loading.defaultProps = {
  showHeader: false,
};

export default Loading;

Sie müssen speichern Sie das zurückgegebene Wert von setTimeout() irgendwo und pass, die in clearTimeout(). Sie übergeben der Funktion die Referenz, die nicht funktionieren.
wie @Pointy erwähnt, müssen Sie speichern den zurückgegebenen Wert von setTimeout. Dieses wird gesagt, mit der componentWillUnmount lifecycle-Methode ist der bevorzugte Ort, um diese operation
Der zurückgegebene Wert von setTimeout wird durch die Einstellung des Staates, die ich nicht tun will, es sei denn, ich habe erreicht 8 Sekunden.
der return-Wert von setTimeout ist eine timerId zum deaktivieren der Zeitüberschreitung. this.timeout = setTimeout(...) und dann clearTimeout(this.timeout).

InformationsquelleAutor Turnipdabeets | 2017-08-14

Diese machen mich denken, dass der timer nicht immer abgebrochen

Als Spitz sagte, ist es nicht. Du bist die übergabe eines Funktion (this.timer) in clearTimeout. Sie müssen übergeben Sie die setTimeout Rückgabewert (das handle des Timers), so können Sie diesen Griff, um es zu annullieren.

In einer einfachen componennt, ich sehe nicht die Notwendigkeit für die timer Funktion, es erhöht nur die Komplexität, ich würde einfach den timer im CDM:

class Loading extends Component {
  state = {
    error: false,
  };

  componentDidMount = () => {                //***
    //Remember the timer handle             //***
    this.timerHandle = setTimeout(() => {    //***
      this.setState({ error: true });        //***
      this.timerHandle = 0;                  //***
    }, 8000);                                //***
  };                                         //***
                                             //***
  componentWillUnmount = () => {             //***
    //Is our timer running?                 //***
    if (this.timerHandle) {                  //***
        //Yes, clear it                     //***
        clearTimeout(this.timerHandle);      //***
        this.timerHandle = 0;                //***
    }                                        //***
  };                                         //***

  render() {
    const { showHeader = false } = this.props;
    const { error } = this.state;
    return (
      <View style={backgroundStyle}>
        {showHeader && <HeaderShell />}
        {!error &&
          <View style={loadingHeight}>
            <PlatformSpinner size="large" />
          </View>}
        {error && <Error code="service" />}
      </View>
    );
  }
}

Loading.propTypes = {
  showHeader: PropTypes.bool,
};

Loading.defaultProps = {
  showHeader: false,
};

export default Loading;

Aber wenn dort mehr Logik, als gezeigt, oder einfach nur persönliche Präferenz, ja, getrennte Funktionen sind gut:

class Loading extends Component {
  state = {
    error: false,
  };

  componentDidMount = () => {
    this.setTimer();
  };

  componentWillUnmount = () => {
    this.clearTimer();
  };

  setTimer = () => {
    if (this.timerHandle) {
      //Exception?
      return;
    }
    //Remember the timer handle
    this.timerHandle = setTimeout(() => {
      this.setState({ error: true });
      this.timerHandle = 0;
    }, 8000);
  };

  clearTimer = () => {
    //Is our timer running?
    if (this.timerHandle) {
        //Yes, clear it
        clearTimeout(this.timerHandle);
        this.timerHandle = 0;
    }
  };

  render() {
    const { showHeader = false } = this.props;
    const { error } = this.state;
    return (
      <View style={backgroundStyle}>
        {showHeader && <HeaderShell />}
        {!error &&
          <View style={loadingHeight}>
            <PlatformSpinner size="large" />
          </View>}
        {error && <Error code="service" />}
      </View>
    );
  }
}

Loading.propTypes = {
  showHeader: PropTypes.bool,
};

Loading.defaultProps = {
  showHeader: false,
};

export default Loading;

Vielen Dank für das schreiben. Was ist der Grund für die Einstellung auf 0? this.timerHandle = 0;
Ich immer tun, wie eine Flagge, um anzuzeigen, dass es keine timer-Griff mehr (seit 0 ist ein Ungültiger Wert für einen timer-handle). Macht auch für eine bequeme flag (siehe die Umsetzung von clearTimer). Und in der zweiten code-block, wo setTimer und clearTimer sind verschiedene Methoden, die Sie würde wollen, dass der check-in setTimer.

InformationsquelleAutor T.J. Crowder

Müssen Sie klar mit den zurückgegebenen Wert aus setTimeout (siehe unten). Allerdings tun clearTimeout im componentWillUnmount ist eine richtige Weg, es zu tun, ich habe nicht gesehen, jeder macht es anders.

  componentDidMount = () => {
    this.mounted = true;
    this.timeout = this.timer();
  };

  componentWillUnmount = () => {
    this.mounted = false;
    clearTimeout(this.timeout);
  };

  timer = () =>
    setTimeout(() => {
      (this.mounted && this.setState({ error: true })) || null;
    }, 8000);

InformationsquelleAutor Purgatory

Reagieren 16.3: diese Lösung war für mich, der anothers solutios nicht in meinem Fall:

class Modal extends Component {

  constructor(props) {
    super(props);
    this.timeout = null;
    this.state = {
      clicked: false,
    };
  }

  handleClick = async (e, action) => {
    if (!this.state.clicked) { /
      this.setState( {clicked: true} , async () => {
        const res = await action();
        this.timeout = setTimeout(() => {
        if (this.mounted) this.setState( {clicked: false});
          this.timeout = null;
        }, 2000);

      });
    }
  };

  componentDidMount = () => {
    this.mounted = true;
  };


  componentWillUnmount = () =>{
    this.mounted = false;
    if (this.timeout) {
      clearTimeout(this.timeout)
    }
  };

InformationsquelleAutor stackdave

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.