0
votes

Exécutez USEEFFET uniquement si certaines valeurs sont vraies, mais ne remplissez pas à moins que les dépendances changent

J'ai trouvé des questions similaires où les gens voulaient exécuter useeffect code> uniquement si certaines valeurs sont vraies, mais les solutions sont toujours dans le sens de:

function useEffectIfReady(fn, deps = [], isReady = true) {
  const ref = useRef({
    forceRerunCount: 0,
    prevDeps: [],
  });

  if (isReady && (ref.current.forceRerunCount === 0
    || deps.length !== ref.current.prevDeps.length
    || !deps.every((d, idx) => Object.is(d, ref.current.prevDeps[idx])))) {
    ref.current.forceRerunCount++;
    ref.current.prevDeps = deps;
  }

  useEffect(() => {
    if (ref.current.forceRerunCount === 0) {
      return;
    }

    return fn();
  }, [ref.current.forceRerunCount]);
});

javascript reactjs react-hooks

1 commentaires

Pourquoi n'essayez-vous pas différent useeffect pour Istrue & Assignefonction? Il va courir seul des états d'appartenance.

4 Réponses :

1
votes

Que diriez-nous d'utiliser une ref tant que gatekeepr xxx

5 commentaires

C'est la même chose que mon premier exemple, sauf sans Istrue dans les dépendances, la fonction ne fonctionne pas lorsque isTrue est retourné


                                                
                                                                                            
                                                    J'ai mal interprété votre intention alors, j'ai mis à jour ma réponse pour montrer comment  fn  ne fonctionnera que si  iSready  était vrai, mais ne s'écoulera plus s'il est retourné à la réalité                                                

                                                
                                                                                            
                                                    J'ai fait une autre mise à jour de ma réponse, maintenant cela fonctionne réellement!                                                
                                                
                                                                                            
                                                    Je vois que c'est assez intelligent, pourquoi avez-vous besoin de la troisième état? Je pense que juste avoir les 2 premiers États devraient suffire                                                
                                                
                                                                                            
                                                    Vous avez raison, merci de pointer cela - j'ai mis à jour ma réponse


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Essayez de fractionnement de l'USEEffect dans ce cas pour chaque état, juste une idée basée sur vos codes  xxx                                  

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    2
 votes
                                
                            
                            
                                
                                     Si j'ai bien compris votre requête correctement, vous devez exécuter le  FOOFN ()  code> en fonction de la valeur de IsTrue. 
 Bien qu'il existe des moyens d'utiliser des crochets personnalisés pour comparer les valeurs anciennes et nouvelles et Cela peut être utilisé pour résoudre votre problème ici, je pense qu'il y a une solution beaucoup plus simple.  p> 
 simplement, supprimer le  istrue  code> de la matrice de dépendance. Cela garantira que votre  useEffect  code> ne fonctionne que lorsque le  dep  code> change. Si à ce moment-là, i  strue == true  code>, alors rien n'est exécuté, sinon votre code est exécuté.  P> 
useEffect(() => {
  if (!isTrue) {
    return;
  }
  someFunction(dep);
}, [dep]);

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Si j'ai bien compris, le comportement que vous recherchez est: 

 Si  iSready  code> devient true pour la première fois, exécutez  fn ()  code>  li>
 Si  Isready  code> retourne de False à TRUE:  LI>
 ul> 
  Deps  code> a changé depuis la dernière fois, exécutez  fn ()  code>  li>
  Deps  code> n'a pas changé depuis la dernière fois, ne pas exécuter  fn ()  code>  li>
 ol> 
 Si  Deps  code> Modifier et  iSready  code> est vrai, exécutez  fn ()  code>  li>
 ul>  J'ai travaillé de la sorte de brancher votre crochet dans un code d'interface utilisateur, si ce n'est pas correct, faites-le moi savoir et je vais changer / supprimer cela. Il me semble que  iSready  code> et  DEPS  code> ne possède pas de relation directe, car ils ne correspondent pas assez bien pour un seul  useeffect  code> pour gérer . Ils sont responsables de différentes choses et doivent être traités séparément. J'essaierais et j'essaierais des choses plus haut dans la logique afin de jouer plus agréable ensemble, en dehors du cycle de rendu réagissant si possible, mais je comprends que ce n'est pas toujours le cas.  P> 
 Si oui, en utilisant un Gate et  refs  code> pour contrôler le flux entre eux a le sens le plus sens à moi. Si vous ne transmettez qu'un  dep  code> au crochet, cela rend les choses un peu plus simples:  p>  xxx  pré> 
 Cependant, si vous devez transmettre un nombre non spécifié de Dépendances Ensuite, vous allez devoir faire vos propres vérifications sur l'égalité. Réagir va jeter des avertissements si vous essayez de transmettre des objets de spread à un  useEffect  code> et il est préférable que la lisibilité soit à la fois codée durement. Pour autant que je puisse dire cela, cela fait la même chose que votre crochet d'origine, mais sépare la logique de comparaison (simple) qui, espérons-le, il sera plus facile de le refacteur et de maintenir:  p> 
  p> 


<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

                                

                                                                    
                                    
                                    
                                        0 commentaires