Comment corriger les erreurs « Impossible d'effectuer une mise à jour de l'état React sur un composant non monté » ?

Identification du composant problématique

La trace de pile fournie dans la console du navigateur indique le composant responsable de la violation de mise à jour d'état. Chaque ligne de la trace de la pile représente un appel de fonction, avec le nom du composant ou le constructeur de classe mentionné entre parenthèses :

• dans TextLayerInternal (créé par Context.Consumer)
• dans TextLayer ( créé par PageInternal)

Cela suggère que le composant TextLayer tente de mettre à jour son état après avoir été démonté.

Résolution de l'erreur de mise à jour de l'état

Pour résoudre le problème, vous devez vérifier que toutes les opérations asynchrones sont annulées ou terminées avant le démontage du composant dans composantWillUnmount. Dans votre cas, cela implique de gérer la fonction throttleable setDivSizeThrottleable.

Code révisé

Dans le composant Book révisé, vous avez apporté les modifications suivantes :

• Converti de setDivSizeThrottleable en une fonction annulable en utilisant throttle.cancel().
• Ajout d'une fonction de nettoyage dans composantWillUnmount pour annuler la fonction throttleable.

class Book extends React.Component {
  setDivSizeThrottleable: ((() => void) & Cancelable) | undefined;
  ...

  componentDidMount = () => {
    this.setDivSizeThrottleable = throttle(
      () => {
        this.setState({
          pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
        });
      },
      500,
    );

    this.setDivSizeThrottleable();
    window.addEventListener("resize", this.setDivSizeThrottleable);
  };

  componentWillUnmount = () => {
    window.removeEventListener("resize", this.setDivSizeThrottleable!);
    this.setDivSizeThrottleable!.cancel();
    this.setDivSizeThrottleable = undefined;
  };

En gérant correctement l'annulation de la fonction throttleable, vous pouvez empêcher le violation de la mise à jour de l'état et résolvez l'erreur « Impossible d'effectuer une mise à jour de l'état React sur un composant non monté ».

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!