web-dev-qa-db-fra.com

Que se passera-t-il si j'utilise la fonction setState () dans le constructeur d'une classe dans ReactJS ou React Native)?

Par curiosité, je veux juste savoir ce qui se passera si j'utilise la fonction setState() dans le constructeur d'une classe dans React Native ou ReactJS? Tels que:

constructor(props) {
  super(props);
  this.setState({title: 'new title'});
}

quel est le cycle de vie de React va se passer?)

Je n'ai pas lu le code dans React. Je crains que cela ne cause des dommages si je l’écris de cette façon.

reactjsreact-native
48
Jony

Ce que setState fait essentiellement, c'est d'exécuter une série de logiques dont vous n'avez probablement pas besoin dans le constructeur.

Lorsque vous utilisez state = {foo : "bar"}, Vous assignez simplement quelque chose à l'objet javascript state, comme vous le feriez pour tout autre objet. (C'est tout state est d'ailleurs, juste un objet régulier local à chaque composant).

Lorsque vous utilisez setState(), mis à part l'affectation à l'objet state, vous devez également générer à nouveau le composant et tous ses enfants. Ce dont vous n'avez pas besoin dans le constructeur, car le composant n'a pas encore été rendu.

59
swelet

Le message d'erreur serait Uncaught TypeError: Cannot read property 'VARIABLE_NAME' of null

Veuillez consulter les deux extraits suivants de jsfiddle.

Cas 1) Solution de travail jsfiddle

class Hello extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        name: 'world'
      } 
    }

  render() {
    return <div>{this.state.name} </div>
  }
}

ReactDOM.render(<Hello />, document.getElementById('container'));

Cas 2) Solution ne fonctionne pas

class Hello extends React.Component {
    constructor(props) {
      super(props);

      this.setState({
        name: 'hello'
      });
    }

  render() {
    return <div>{this.state.name} </div>
  }
}

ReactDOM.render(<Hello />, document.getElementById('container'));

Conclusion:

Ma règle générale , à l'intérieur de constructor utilise this.state = {} Directement, à d'autres endroits, utilisez this.setState({ });

25
Alan Dong

Constructeur: Le constructeur est utilisé pour initialiser l'état.

State: Les composants contenant l'état local ont une propriété appelée "this.state".

SetState: React disposent d'une méthode appelée setState. L'appel de "this.setState" provoque React de restituer votre Si vous utilisez setState dans le constructeur, vous obtiendrez l’erreur suivante: Vous ne pouvez mettre à jour qu’un composant monté ou un composant de montage, ce qui signifie généralement que vous avez appelé setState () sur un composant non monté.

4
s.kata