J'ai étudié les réactions et les recherches et je n'ai trouvé aucune réponse à ce sujet.
J'ai donc ce composant qui appelle mon api pour savoir quoi faire lorsqu'il est rendu.
Le problème est qu'il est rendu deux fois, et je voulais savoir si cela allait parce que je dis au composant de se mettre à jour ou si je fais quelque chose de mal.
D'après ce que j'ai recherché, je vois que le rendu s'exécute si le setState est appelé, mais je trouve toujours cela un peu étrange, c'est peut-être parce que je suis nouveau dans React mais je voudrais clarifier les choses.
Exemple:
class Car extends React.Component {
constructor() {
super();
this.state = {
color:'none',
};
}
componentDidMount(){
this.updateColor();
}
updateColor() {
this.setState(() => {
return { color: 'red'}
});
}
render() {
console.log("potatoes");
return (
<div>
<h1>Car color: {this.state.color}</h1>
</div>
);
}
}
React.render(<Car />, document.getElementById('app'));
Lien Codepen:
https://codepen.io/jorgemdss/pen/qBEqroE?editors=0010
Si vous ouvrez les outils de développement, vous voyez que les "pommes de terre" sont enregistrées deux fois.
Est-ce tout à fait normal ou est-ce que je fais quelque chose de mal?
3 Réponses :
C'est normal car dans le premier rendu, il est rendu avec une valeur comme 'aucun' et sur le second rendu avec une valeur comme 'rouge'.
Vous verrez que le composant ne rend qu'une seule fois si vous commentez setState .
Lorsque vous exécutez ce code, vous verrez le journal comme suit.
"none" "red"
Console.log
XXX
C'est tout à fait normal.
Le premier rendu est lorsque le composant monte et le second est lorsqu'il exécute componentDidMount et appelle updateColor qui met à jour l'état et le restitue.
Vous ne voyez probablement pas mais votre composant affichera aucun et après rouge .
Merci d'avoir confirmé :) J'ai remarqué ce que vous dites et cela a du sens, je ne savais tout simplement pas pour le re-rendu, mais tout a du sens maintenant :)
Je ne suis pas pour React, mais après avoir testé avec votre codepen, je pense que c'est:
La première fois que le code est exécuté, c'est parce que React.render ( Ensuite, après le changement d'état, la page est à nouveau rendue automatiquement.
Vous pouvez tester cela si vous ajoutez this.state.color à la console.log et / ou commenter le setState
Vous définissez l'état sur
componentDidMountlorsque vous mettez à jour l'état du composant est re-rendu, sauf si vous utilisezshouldComponentUpdate