Comment corriger l'erreur React "Cannot update a component (`ConnectFunction`) while rendering a different component" ?
La librairie JavaScript React fonctionne avec un système de composant. Chaque élément de votre application est un composant, et c'est en agençant différents composants que vous créez votre application ou site internet. Chaque composant a son propre cycle de vie avec ses états. Au fur et à mesure de son développement, les développeurs de la librairie ont mis en place des fonctionnalités et des contrôles pour aider les développeurs à avoir leurs codes plus propres et à ne pas mélanger les composants. Le message d'erreur "Cannot update a component (`ConnectFunction`) while rendering a different component" est lié à ces contrôles.
Ce message d'erreur est apparu avec la version 16.3.0 de React. Il s'affiche si, dans la méthode de rendu d'un de vos composants, vous mettez à jour l'état d'une propriété de votre composant, ou d'un autre composant. La méthode de rendu "render" doit avoir dans sa logique du code qui se concentre uniquement sur l'affichage, et on ne doit alors pas modifier un autre composant, ou une propriété.
const HomePage = (props) => {
//L’erreur vient de cette ligne qui met à jour l'état d'une propriété
props.setProperty(true);
return (
<div key={props.property } className="container-fluid">
<MonComposant />
</div>
);
};
Une solution pour résoudre ce problème est d'encapsuler votre changement d'état à l'intérieur du Hook "useEffect". Le code appelé au sein de ce Hook n'est appelé que lorsque le composant est monté dans l'application ou lorsqu'il est mis à jour. Pour que le code ne soit appelé que lors du montage, il faut ajouter le paramètre "[]" à l'appel du Hook.
const HomePage = (props) => {
//Le changement d'état n'a lieu que lors du montage, le message d'erreur ne s'affichera plus
useEffect(() => {
props.setProperty(true);
}, []);
return (
<div key={props.property } className="container-fluid">
<MonComposant />
</div>
);
};