Bonjour à la communauté,

Je suis en train de développer une application avec React Native et je me heurte à un défi particulier lié au re-rendu conditionnel d'un composant. Mon objectif est de rerendre ma grille de composants jusqu'à ce que j'obtienne un rendu initial où le score calculé est zéro. Cependant, même si je parviens à obtenir un score cohérent et correct lors de la première génération de la grille, le comportement de re-rendu attendu ne se produit pas.

Voici un extrait simplifié de mon code :

function GridLayout() {
    // ... initialisations et états
    useEffect(() => {
        // Initialisation de la grille
    }, []);

    useEffect(() => {
        // Logique de mise à jour après le changement d'images
    }, [imagesInfo]);

    useEffect(() => {
        // Recherche d'images et calcul du score
    }, [allSquares]);

    useEffect(() => {
        // Déclencher un re-rendu si le premier rendu avec un score de zéro n'est pas atteint
    }, [isFirstRenderWithZeroScore]);

    // ... autres fonctions et logique
    return (
        <View style={styles.center} key={renderCount}>
            {gridLayout}
        </View>
    );  
}

Je précise que lors de la première génération de la grille, je reçois un score cohérent. Toutefois, mon intention est de continuer le processus de re-rendu jusqu'à obtenir un score initial de zéro. J'utilise un état isFirstRenderWithZeroScore pour déterminer si cette condition est remplie et un état renderCount pour forcer le re-rendu. Malgré cela, je n'arrive pas à déclencher les re-rendus comme je le souhaite.

Je me demande si je manque quelque chose dans ma logique de re-rendu ou si mon approche globale est incorrecte. Toute aide, suggestion ou orientation serait extrêmement appréciée.

Merci beaucoup pour votre aide et votre temps !

1 réponse


Pourquoi tu as besoin de faire des rerendu ? Pourquoi ne pas calculer le score dans une seule fonction ?