リアクティブコンテキスト内で実行できない関数が、リアクティブコンテキスト内から呼び出されました。
たとえば、effectはcomputedまたはアクティブに実行されているeffect内からスケジュールできません。
テンプレート式の内部でeffectのような関数を呼び出すのは避けてください。これらの関数は、独自のリアクティブコンテキストで実行されます。
計算式は、純粋であることが期待されます。
純粋とは、式が副作用を発生させないことを意味します。
副作用とは、afterRenderのスケジュール、新しいeffectの作成、またはObservableの購読などの操作です。
いくつかの操作は、一般的な落とし穴を回避するために、リアクティブコンテキスト内では明示的に禁止されています。
たとえば、computed内からafterRenderを使用すると、計算式が評価されるたびに新しいレンダリングフックがスケジュールされます。
これは意図されたものでなく、アプリケーションのパフォーマンスを低下させる可能性があります。
エラーの修正
このエラーガイドは網羅的なものではありません。 いくつかの一般的なシナリオとエラーの対処方法を説明しています。
afterRender
afterRenderの呼び出しをリアクティブコンテキストの外に移します。
afterRenderフックをスケジュールする適切な場所は、コンポーネントのクラスコンストラクターです。
または、untrackedを使用してリアクティブコンテキストを離れ、明示的にこのエラーを回避します。
effect
effectの呼び出しをリアクティブコンテキストの外に移します。
effectをスケジュールする適切な場所は、@Componentのクラスコンストラクターです。
toSignal
toSignalの呼び出しをリアクティブコンテキストの外に移します。
result = computed(() => { const dataSignal = toSignal(dataObservable$); return doSomething(dataSignal());});
これは、次のようにリファクタリングできます。
dataSignal = toSignal(dataObservable$);result = computed(() => doSomething(dataSignal()));
または、これが不可能な場合は、Observableを手動で購読することを検討してください。
最終手段として、untrackedを使用してリアクティブコンテキストを離れます。
リアクティブコンテキストを離れると、untracked内のシグナル読み取りが無視される可能性があるため、注意してください。
@debugging
エラーメッセージには、予期せず呼び出された関数が記載されています。 アプリケーションコード内でこの関数呼び出しを探します。
または、ブラウザのスタックトレースは、関数が呼び出された場所と関数が配置されている場所を示します。