フックを追加する

  • 2 分

Effect フックを使用すると、お使いのアプリケーションの状態を監視し、更新があった場合にコードを実行できます。 変更があった場合に実行する関数は、useEffect を使用して登録します。

シナリオ

アプリケーションでは、個々のアイテムをタップし、それらを準備済みとしてマークできます。 まだ準備ができていないアイテムがいくつかある場合、「刻み続ける」と表示します。すべてのアイテムが完了したら、「準備作業が完了しました」と表示します。

この動作を、新しい状態オブジェクトを追加して設定します。 オブジェクトは、Effect フックから更新します。

重要

この例では、useEffect 内で状態を変更します。 既定で useEffect は、"任意の" ステートフル オブジェクトが変更されるたびに実行されます。 この動作によって、無限ループが発生することがあります。 このループでは、状態を変更することによって、フックを実行する状態が変更され、フックの実行が続きます。

この無限ループを回避するには、useEffect の依存関係パラメーターで 1 つのオブジェクトのみが参照されるようにします。 これは、コードの作成時に行います。

新しい状態プロパティを追加する

  1. App.jsx ファイルを開きます。

  2. 新しい状態プロパティを追加するには、TODO: Add new state property の行の下に次のコードを挿入します。

    // TODO: Add new state property
const [ prepared, setPrepared ] = useState(false);

Effect フック リスナーを追加する

Effect フック リスナーを追加するには、TODO: Add the effect hook の行の下に次のコードを挿入します。

// TODO: Add the effect hook
useEffect(() => {
    setPrepared(recipe.ingredients.every(i => i.prepared));
}, [recipe]);

このコードでは、setPrepared を使用して prepared を更新します。 これは、指定した条件に一致するすべての項目に基づいてブール値を返す、every メソッドを使用します。 この場合、すべてのアイテムが準備されているかどうかを確認します。 そうでない場合、メソッドによって false が返されます。

useEffect の 2 番目のパラメーターは [recipe] に設定されています。 この設定は、recipe オブジェクトが変更された場合 "のみ"、確実にコードが実行されることを依存関係で指定します。

表示を追加する

準備作業が完了したら、ユーザーにメッセージが表示されるようにします。 これを行うには、TODO: Add the prep work display の行の後に、次のコードを追加します。

{/* TODO: Add the prep work display */}
{ prepared ? <h2>Prep work done!</h2> : <h2>Just keep chopping.</h2>}

prepared オブジェクトを確認します。 これが true の場合、「準備作業が完了しました」と表示します。それ以外の場合は、「刻み続ける」と表示します。

ページをテストする

  1. すべてのファイルを保存します。
  2. お使いのブラウザーに戻り、ページを更新します。
  3. 食材を選択して、すべてを準備済みとマークします。 (これらにはすべて線が引かれ、リストから消される必要があります。)このテキストは、ページ下部で更新されます。