Comment faire pour annuler une opération d'extraction sur componentWillUnmount

Quand vous tirez une Promesse, il pourrait prendre quelques secondes avant qu'il ne décide de l'utilisateur pourrait avoir navigué vers un autre endroit dans votre application. Ainsi, lorsque la Promesse résout setState est exécuté sur démonté composant et vous obtenez une erreur, tout comme dans votre cas. Cela peut également provoquer des fuites de mémoire.

C'est pourquoi il est préférable de déplacer une partie de votre logique asynchrone à partir de composants.

Sinon, vous aurez besoin de quelque sorte annuler votre Promesse. Alternativement comme un dernier recours technique (c'est un antipattern) - vous pouvez garder une variable afin de vérifier si le composant est toujours monté:

componentDidMount(){
  this.mounted = true;

  this.props.fetchData().then((response) => {
    if(this.mounted) {
      this.setState({ data: response })
    }
  })
}

componentWillUnmount(){
  this.mounted = false;
}

Je vais souligner qu'encore une fois - ce est un antipattern mais peut être suffisant dans ton cas (comme ils l'ont fait avec Formik mise en œuvre).

Une discussion similaire sur GitHub

EDIT:

C'est probablement comment pourrais-je résoudre le même problème (qui n'ont rien mais Réagir) avec Crochets:

OPTION A:

import React, { useState, useEffect } from "react";

export default function Page() {
  const value = usePromise("https://something.com/api/");
  return (
    <p>{value ? value : "fetching data..."}</p>
  );
}

function usePromise(url) {
  const [value, setState] = useState(null);

  useEffect(() => {
    let isMounted = true; //track whether component is mounted

    request.get(url)
      .then(result => {
        if (isMounted) {
          setState(result);
        }
      });

    return () => {
      //clean up
      isMounted = false;
    };
  }, []); //only on "didMount"

  return value;
}

OPTION B: Alternativement avec useRef qui se comporte comme une propriété statique d'une classe, ce qui signifie qu'il ne fait pas de composant rerender quand c'est les changements de la valeur:

function usePromise2(url) {
  const isMounted = React.useRef(true)
  const [value, setState] = useState(null);


  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  useEffect(() => {
    request.get(url)
      .then(result => {
        if (isMounted.current) {
          setState(result);
        }
      });
  }, []);

  return value;
}

//or extract it to custom hook:
function useIsMounted() {
  const isMounted = React.useRef(true)

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  return isMounted; //returning "isMounted.current" wouldn't work because we would return unmutable primitive
}

Exemple: https://codesandbox.io/s/86n1wq2z8

Vous pouvez utiliser AbortController pour annuler une demande de récupération.

JS:

class FetchComponent extends React.Component{
  state = { todos: [] };
  
  controller = new AbortController();
  
  componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/todos',{
      signal: this.controller.signal
    })
    .then(res => res.json())
    .then(todos => this.setState({ todos }))
    .catch(e => alert(e.message));
  }
  
  componentWillUnmount(){
    this.controller.abort();
  }
  
  render(){
    return null;
  }
}

class App extends React.Component{
  state = { fetch: true };
  
  componentDidMount(){
    this.setState({ fetch: false });
  }
  
  render(){
    return this.state.fetch && <FetchComponent/>
  }
}

ReactDOM.render(<App/>, document.getElementById('root'))

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Quand j'en ai besoin "annuler tous les abonnements et asynchrone" j'ai l'habitude d'expédition quelque chose de redux en componentWillUnmount d'informer tous les autres abonnés et de l'envoyer encore une demande d'annulation de serveur si nécessaire

Je pense que j'ai pensé à un moyen de contourner cela. Le problème n'est pas tant l'extraction elle-même, mais le setState une fois que le composant est rejeté. Donc la solution était de mettre en this.state.isMounted comme false puis sur componentWillMount changer pour vrai, et dans componentWillUnmount la valeur false à nouveau. Puis juste if(this.state.isMounted) la setState à l'intérieur de l'extraction. Comme:

  constructor(props){
    super(props);
    this.state = {
      isMounted: false,
      isLoading: true,
      dataSource: [{
        name: 'loading...',
        id: 'loading',
      }]
    }
  }

  componentDidMount(){
    this.setState({
      isMounted: true,
    })

    return fetch('LINK HERE')
      .then((response) => response.json())
      .then((responseJson) => {
        if(this.state.isMounted){
          this.setState({
            isLoading: false,
            dataSource: responseJson,
          }, function(){
          });
        }
      })
      .catch((error) =>{
        console.error(error);
      });
  }

  componentWillUnmount() {
    this.setState({
      isMounted: false,
    })
  }