Réglage de l'état sur componentDidMount()

Je sais que c'est un anti-modèle pour définir l'état sur componentDidMount et un état doit être établi sur la componentWillMount mais supposons que je veux régler la longueur de la nombre de li balises comme un état. Dans ce cas, je ne peux pas définir l'état sur componentWillMount depuis le li balises pourraient ne pas avoir été montés au cours de cette phase. Donc, ce que devrait être la meilleure option ici? Ça va être beau si je définir l'état sur componentDidMount?

  • avez-vous rendu le li balises basé sur quelques accessoires (ou les données)? Pourriez-vous utiliser data.length?
  • il suffit de le mettre tout simplement. dire que j'ai 4 li étiquettes et je veux obtenir le nombre d'entre eux de sorte que mon maxNumber de l'état devrait être de 4. cependant, je ne le rendu de la li balises basé sur quelques accessoires (ou des données).
  • Ensuite utiliser les données des accessoires dans getInitialState() pour calculer le max, et le mettre dans cet état. Il ne semble pas y avoir un besoin d'attendre pour le composant à être monté.
  • qu'en est asynchrone de données?
InformationsquelleAutor Nirmalya Ghosh | 2016-03-07
  1. 71

    Il n'est pas un anti-modèle pour appeler setState dans componentDidMount. En fait, ReactJS fournit un exemple de cela dans leur documentation:

    Vous devez remplir les données avec des appels AJAX dans le componentDidMount cycle de vie de la méthode. C'est de sorte que vous pouvez utiliser setState de mettre à jour votre composant quand les données sont récupérées.

    Exemple De La Doc

    componentDidMount() {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        //Note: it's important to handle errors here
        //instead of a catch() block so that we don't swallow
        //exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }
    • setState est fait dans une fonction de rappel ici - c'est un peu un scénario différent
    • je ne suis pas sûr que c'est un anti-modèle. le actuel de la documentation mentionne que l'établissement de l'état dans componentDidMount va déclencher le re-rendu, mais il n'y a aucune mention d'une mauvaise pratique.
    • cette réponse explique que ce n'est pas un anti-modèle.
    • donc, pour clarifier pour quelqu'un d'autre de tomber sur cette question et la réponse, le cycle de vie de la fonction isMounted est obsolète, et de l'utiliser pour configurer le composant de l'état est considéré comme un anti-modèle. réglage de l'etat à travers componentDidMount n'est pas considéré comme un anti-modèle.
    • Je voulais juste rajouter un commentaire qu'il y a un Github discussion sur ce et il est recommandé si vous faites partie de rendu côté serveur ou de demande de données pour appeler setState dans componentDidMount. Cependant, la raison pour laquelle ce n'est généralement pas recommandée, car il peut déclencher une double render (voir la eslint de la règle de non-fait-monter-set-de l'état
    • Et sinon, comment allez-vous setState après un appel asynchrone?
    • Je ne me souviens pas des détails, mais je pense que j'étais juste en soulignant que la mécanique était un peu différente ici l'original de la question ne semble pas nécessiter un appel asynchrone pour définir l'état désiré. Je ne veux pas d'indiquer votre code était invalide 🙂

    InformationsquelleAutor lux
  2. 7

    Selon la Réagir la Documentation, il est parfaitement OK pour appeler setState() de l'intérieur de la componentDidMount() fonction.

    Il sera la cause de render() d'être appelé deux fois, ce qui est moins efficace que de l'appeler une fois, mais d'autres que c'est très bien.

    Vous pouvez trouver de la documentation ici:

    https://reactjs.org/docs/react-component.html

    Voici l'extrait de la documentation:

    Vous pouvez appeler setState() immédiatement en componentDidMount(). Il
    déclencher un supplément de rendu, mais il va se passer avant que le navigateur
    les mises à jour de l'écran. Cela garantit que même si le render() sera
    être appelé deux fois dans ce cas, l'utilisateur ne voit pas l'intermédiaire
    état. Utiliser ce modèle avec prudence, car il est souvent la cause
    les problèmes de performance...

    InformationsquelleAutor Luis Perez