web-dev-qa-db-fra.com

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

Je sais que définir un état sur componentDidMount est un anti-modèle et qu'un état devrait être défini sur componentWillMount, mais supposons que je veuille définir la longueur du nombre de balises li comme état. Dans ce cas, je ne peux pas définir l'état sur componentWillMount car les balises li n'ont peut-être pas été montées au cours de cette phase. Alors, quelle devrait être la meilleure option ici? Est-ce que ça ira si je mets l'état sur componentDidMount?

reactjs
34
Nirmalya Ghosh

Appeler setState dans componentDidMount n'est pas un anti-modèle. En fait, ReactJS en fournit un exemple dans leur documentation :

Vous devez renseigner les données avec les appels AJAX dans la méthode de cycle de vie composantDidMount. Cela vous permet d'utiliser setState pour mettre à jour votre composant lorsque les données sont récupérées.

Exemple de 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
          });
        }
      )
  }
55
lux

Selon la React Documentation, il est tout à fait possible d'appeler setState() à partir de la fonction componentDidMount().

render() sera appelé deux fois, ce qui est moins efficace qu'un seul appel, mais cela ne pose aucun problème.

Vous pouvez trouver la documentation ici:

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

Voici l'extrait de la documentation:

Vous pouvez appeler setState () immédiatement dans composantDidMount (). Cela déclenchera un rendu supplémentaire, mais cela se produira avant que le navigateur ne mette à jour l'écran. Cela garantit que même si la render () sera appelée deux fois dans ce cas, l’utilisateur ne verra pas l’état intermédiaire. Utilisez ce modèle avec prudence car il provoque souvent des problèmes de performances ...

3
Luis Perez

Si vous transmettez des accessoires à un composant et que vous souhaitez mettre à jour l'état en fonction d'accessoires, vous devez utiliser setTimeout ou setInterval, ou envoyer des demandes AJAX.

this.state = {
    favourite: null,
    job_applied: null,
}

componentDidMount() {
    setTimeout(() => {
        if (this.props.wishlist == true) {
            this.setState({ favourite: true });
        }
        if (this.props.job_applied == true) {
            this.setState({ job_applied: true });
        }
    }, 300)
}
0
Surendra Pathak