Appel de fonction interdit dans un contexte réactif

Une fonction qui n'a pas le droit de s'exécuter dans un contexte réactif a été appelée depuis un contexte réactif.

Par exemple, un effect ne peut pas être planifié depuis un computed ou depuis un effect en cours d'exécution. Évitez d'appeler des fonctions comme effect dans des expressions de template, car celles-ci s'exécutent dans leur propre contexte réactif.

Les expressions computed sont censées être pures. Pure signifie que l'expression ne déclenche aucun effet de bord. Les effets de bord sont des opérations comme planifier afterNextRender/afterEveryRender, créer un nouvel effect ou s'abonner à des observables.

Certaines opérations sont explicitement interdites dans les contextes réactifs afin d'éviter des pièges courants. Par exemple, utiliser afterNextRender/afterEveryRender dans un computed planifie de nouveaux hooks de rendu à chaque évaluation de l'expression computed. Ce n'est probablement pas voulu et cela pourrait dégrader les performances de l'application.

Corriger l'erreur

Ce guide d'erreur n'est pas exhaustif. Il présente quelques scénarios courants et la façon de corriger l'erreur.

afterNextRender/afterEveryRender

Déplacez l'appel à afterNextRender/afterEveryRender en dehors du contexte réactif.

Le constructeur de la classe du composant est un bon endroit pour planifier le hook after render. Vous pouvez aussi utiliser untracked pour quitter le contexte réactif et désactiver explicitement cette erreur.

effect

Déplacez l'appel à effect en dehors du contexte réactif.

Le constructeur de la classe d'un @Component est un bon endroit pour planifier un effect.

toSignal

Déplacez l'appel à toSignal en dehors du contexte réactif.

result = computed(() => {
  const dataSignal = toSignal(dataObservable$);
  return doSomething(dataSignal());
});

peut être refactorisé en :

dataSignal = toSignal(dataObservable$);
result = computed(() => doSomething(dataSignal()));

Sinon, si ce n'est pas possible, envisagez de vous abonner manuellement à l'observable.

En dernier recours, utilisez untracked pour quitter le contexte réactif. Soyez prudent : quitter le contexte réactif peut faire ignorer toute lecture de signal effectuée dans untracked.

Déboguer l'erreur

Le message d'erreur mentionne la fonction appelée de manière inattendue. Cherchez cet appel de fonction dans le code de votre application.

Vous pouvez aussi consulter la stack trace de votre navigateur, qui indique où la fonction a été invoquée et où elle se trouve.