web-dev-qa-db-ja.com

Svelte 3、非同期のonMountまたは有効な代替手段？

私が必要なのは、Svelte onMount()で_async-await_を使用することです。

または、何が問題で何が代わりに使用できるかを提案していただけますか？

再現するには

  1. ここに移動： https://svelte.dev/repl/000ae69c0fe14d9483678d4ace874726?version=3.23.
  2. コンソールを開く
  3. ボタンをクリックして
  4. 次のメッセージが表示されます：_"Mounting..."_および_"A lot of background work..."_
  5. もう一度クリックすると、破棄メッセージは書き込まれません

なぜ？

onMount()はasync関数の約束を認識しましたか？よろしいですか？

asyncコンポーネントをレンダリングする前にfunction lazyLoading()を待つ必要があるため、Childの動作が必要です。

Svelteでこれを行う別の方法はありますか？

javascriptecmascript-6sveltesvelte-3svelte-component
4
Fred Hors

onMountがasync関数にならない理由を説明するだけです（これは可能性があります将来的に変更されますが、 tはそれを期待します）：

コンポーネントが破棄されたときに呼び出されるonMountハンドラーから関数を返すことができます。ただし、async関数はpromiseのみを返すことができます。 promiseは関数ではないため、Svelteは戻り値を無視します。

これは、ちなみに、ReactのuseEffectと同じです。競合状態を回避するために、関数は同期している必要があります。 onMountの推奨される解決策は、useEffectの場合と同じです。async関数を配置しますinsideハンドラー：

onMount(() => {
  async function foo() {
    bar = await baz();
  }

  foo();

  return () => console.log('destroyed');
});

（promiseが解決する前にコンポーネントが破棄された結果として発生した競合状態を処理する責任はユーザーにあることに注意してください。ただし、破棄されたコンポーネント内に状態を割り当てることは無害です。）

これらの状況でより有用なフィードバックを提供することを議論するために問題をオープンしました： https://github.com/sveltejs/svelte/issues/4944

2
Rich Harris