useEffect が完了する前に実行する関数

Question

このコードがあります:

リーリー

問題は、let chatProps = useMultiChatLogic('xxxx-xx-x-xx-xxx', username, Secret); が useEffect が完了する前に実行されることです。 .then内に移動しようとしましたが、フックエラーやその他のものが発生しましたが、何も機能しませんでした。

Answer 1

React の基本的な理解が欠けていると思います。状態、useEffect、および一般的な制御フローに関するチュートリアルを確認してください。

useEffect は非同期です - React は最初のレンダリング後、依存関係配列にキャプチャされた変数が設定されるたびにコールバックを実行します。依存関係の配列は空であるため、この useEffect はコンポーネントのライフサイクル中 (最初のレンダリング後) に 1 回実行されます。

Multi が何なのかはわかりませんが、次のようなものを試してみてください:

リーリー

ここで、最初のレンダリングでは、username と secret がまだデフォルトの空文字列であるため、リクエストがまだ完了していないことがわかり、読み込みメッセージをレンダリングします。レンダリング後、useEffect が実行され、リクエストが開始されます。

しばらくすると、応答が到着し、username と secret の状態を設定し、別のレンダリングをトリガーします。このレンダリングでは、username と secret の値が応答で利用可能です (応答では空でない文字列であることが保証されていると思います)。そのため、読み込みメッセージは次のようになります。レンダリングされません。代わりに、応答データを含む小道具を受け入れる ChatsPage コンポーネントをレンダリングします。

useMultiChatLogic のようなフックは条件 の上で宣言する必要があるため、追加のコンポーネントが必要です。これがフックでない場合、呼び出しが発生する可能性があります 必要ありませんif の後のコンポーネント関数本体の追加コンポーネント用。

---

React の黄金律は、状態は不変であるということです。そのため、あるレンダリングから次のレンダリングにデータが変更される場合は、 = ではなく setState を介して変更する必要があります。