ユーザー入力に基づいてデータセットからデータをフィルタリングする際の問題

Question

これまでに試したことの概要は次のとおりです:

1. ユーザーが検索クエリを入力できる searchInput 要素があります。
2. searchInput の値が変更された場合、関数を使用してフィルタリング プロセスを処理します。
3. フィルター関数はデータセットをループし、各項目を searchInput の値と比較して、表示するか非表示にするかを決定します。 ただし、searchInput に入力すると、データは同じままで、フィルタリングが有効になっていないように見えます。

データのフィルター関数

リーリー リーリー

restruntList JSON データ形式

リーリー

Answer 1

提供されたコードと説明に基づくと、このアプローチはほぼ正しいように見えますが、フィルター データ関数とレストラン データの処理方法に小さな問題があります。

主な問題は、ステータスのフィルタリングと更新をどのように処理するかです。 React のステータス更新は非同期であるため、searchText 値を直接使用して restaurants をフィルタリングすると、期待した結果が得られない可能性があります。 searchText を設定した直後にはステータスの更新が行われない可能性があるため、一貫性のない結果や古いフィルター結果が得られる可能性があります。

この問題を解決するには、useEffect フックを利用して、searchText が変更されたときにフィルターされたデータを更新します。こうすることで、フィルター機能は常に最新の状態で動作します。更新されたコードは次のとおりです:

リーリー

コードの変更:

1. 生データとフィルター処理されたデータの混同を避けるために、ステータス変数名を restaurants から filteredRestaurants に変更しました。
2. searchText が変更されたときにフィルタリングを処理するための useEffect フックを追加しました。これにより、フィルタリングされたデータが正しく更新されます。

ここで、検索入力ボックスに入力すると、フィルタリングがすぐに有効になり、それに応じてレストラン リストが更新されるはずです。