réagit: exécuter une méthode après la deuxième fois que composantWillRecieveProps est appelé

Question

J'ai une ag-grille principale pour mon application de réaction. Il redevient quand un bouton est cliqué (qui fournit de nouvelles données).

Je voulais ajouter un préfiltre qui filtre initialement les données. donc je créé une nouvelle méthode qui crée mon modèle de pré-filtre, puis appliqué il:

initialFilter(){ 
    ... 
    this.state.gridOptions.api.setFilterModel(myView); 
    this.state.gridOptions.api.onFilterChanged(); 
} 

Je sais que cela fonctionne de test (j'ai appelé la méthode sur une méthode utilisée lorsque les lignes sont sélectionnées et le filtre a été appliqué).

La question était où puis-je appeler la méthode?

Le placer dans componentWillRecieveProps provoque une boucle infinie (je suppose en raison des deux lignes de code mentionnées ci-dessus).

J'ai seulement besoin d'exécuter la méthode UNE FOIS (chaque fois que l'on clique sur un bouton). Après quelques explorations j'ai remarqué si j'ajoute un compteur dans

componentWillRecieveProps(){ 
... 
    if (counter <= 1){ 
     this.initialFilter(); 
     counter++; 
    } 
} 

cela fonctionnera. le pré-filtrage semble fonctionner après la deuxième fois que componentWillRecieveProps est appelé. Je ne sais pas pourquoi, mais je suppose que la première fois est de rendre l'ag-grille, puis la deuxième fois, une fois la grille est rendue, l'exécution de ma méthode fonctionnera. (si j'utilise la condition d'instruction if 'counter == 0', je ne verrai pas mon ag-grid filtré, je suppose que quelque chose est écrasé ou qu'il n'y a pas de données à filtrer ou quelque chose)

clique sur un bouton de la deuxième, troisième, etc fois cette la méthode ne sera plus appeler

mon plan initial était pour le bouton onclick pour changer une nouvelle variable d'état booléen, et ma logique de l'instruction IF serait:

'si cet état booléen est vrai, attendez la deuxième fois que componentWillRecieveProps est appelé, puis exécutez la méthode, puis définissez le booléen sur la valeur opposée'

Quelqu'un peut-il donner des conseils?

Answer 1

J'ai réussi à le fixer avec un peu meilleure approche:

En componentsWillRecieveProps j'ai ajouté ceci:

if (props.preFilter){ 
    this.initialFilter(); 
    counter++; 
    if (counter == 2){ 
     props.preFilterWasApplied(); 
     counter=0; 
    } 
} 

dans mon composant parent j'ai mis un nouvel état pour savoir si ce si basculer instruction est appelée. lorsque vous cliquez sur le bouton, l'état est activé. le compteur est initialement défini sur 0. La méthode initialFilter est exécutée et est ignorée (?), mais elle me permet d'appeler à nouveau componentsWillRecieveProps. Ceci provoque l'exécution de initialFilter (et ne doit pas être ignoré cette fois) et le compteur à 2. il passe par la seconde instruction if et appelle la méthode parent. la méthode parente bascule simplement l'état à false. Le compteur est réinitialisé à 0 prêt pour le prochain clic de bouton.

L'Etat continuera à rester aussi faux, jusqu'à ce que je clique sur le bouton à nouveau, et il sera remis à faux à nouveau après la deuxième componentsWillReceiveProps appel

Si quelqu'un a une façon plus élégante de faire ce qui précède, alors cela serait apprécié :)