問題タブ [react-16]

アップグレードするアプリがありReact 15ますReact 16

一部のインスタンスでは、動作していた選択リストのマッピングと使用が機能しReact 15なくなりました - 選択リストが次のリストを返していることがわかりました[object, Object]

これが私のコードです

したがって、上記のコードでは、選択リストはブラウザーで 4 つのオプションを含む選択リストをレンダリングします - それらはすべて読み取ります[object, Object]

以下の順序付けされていないリストは、4 つの項目を返し、4 つの車種を表示するブラウザで正しくレンダリングします。

私の推測では、選択リストのマークアップが変更されましReact 16たが、そのドキュメントは見つかりませんでした

誰かが私を正しい方向/アドバイスに向けたり、素晴らしいドキュメントを見せてくれたら!

反応16アプリに基本的なフォームがあります。フォームの送信が成功すると、変数を からfalseにtrue切り替えます。ブール値が切り替えられたら、別の div を表示したいと思います。

これが私の変数宣言とフォーム送信関数です:

条件付き HTML は次のとおりです。

フォームは正常に送信され、console.log は変数が から に正常に切り替えられたことを示していますがformSubmitted、HTML は変更されていません。反応16は初めてで、コンポーネントを更新する方法がわかりません。falsetrue

ありがとうございました。

React 18 には、状態更新 (useDeferredValue と useTransition) の優先度を手動で制御するのに役立ついくつかのクールなフックがあり、これらのメソッドを使用すると、テーブルで発生したパフォーマンスの問題が修正されます。しかし、React 18 はまだ安定していません!

React 16 / 17でこれを処理する方法があるかどうか疑問に思っていますか? 行の更新に低優先度のタグを付けて、ユーザーの入力更新が常に中断され、行をレンダリングするテーブルよりも優先されるように調整ツールに指示する方法はありますか?

もう少しコンテキストについて説明すると、私の問題は、ページに検索ボックスとテーブルがあることです。テーブルの行に表示される最初のデータはフィルター処理されていませんが、ユーザーが検索ボックスに入力すると、バックエンドにクエリを実行し、フィルター処理されたデータのリストを取得します。そのデータが戻ってきたら、それをテーブルにレンダリングします。ユーザーが入力を 500 ミリ秒停止した場合にのみデータをフェッチするように、クエリでデバウンスを使用できます (実際に使用しています)。ただし、これは、ユーザーが 1 文字あたり 500 ミリ秒よりも速く入力している場合にのみ役立ち、呼び出しごとにデータを取得するユーザー エクスペリエンスに 500 ミリ秒が追加されます。もっと反応の良いものが欲しいです。

React 18 の更新により、私の問題は完全に解決されました。React 17 でこれを行う方法を探しています。