予期しない非同期動作を選択し直す

Question

react-selectコンポーネントで予期しない動作が発生します。

リストを作成するために外部jsonをロードするように設定しました。

<Select.Async 
    name="cf_search" 
    value="" 
    autoload={false} 
    cache={false} 
    ignoreAccents={false} 
    loadOptions={this.handleCFSearch} 
    onChange={this.handleSelectCFName} 
/> 

handleCFSearch = (input) => { 
    let term = encodeURIComponent(input); 

    return fetch(`${AppGlobal.baseBackend}/PersAddo/autocompleteSearch/${term}.json`) 
     .then((response) => { 
      if(response.ok) { 
       return response.json(); 
      } 
      throw new Error('Network response was not ok.'); 
     }).then((json) => { 
      console.log(json); 
      let values = json.result.map((element) => { 
       return { 
        value: element.pers_id, 
        label: element.first_name + ' ' + element.last_name 
       } 
      }); 
      return { options: values }; 
     }); 
} 

サーバースクリプトは検索語を処理し、JSONで名前の配列を返します。

正常に動作しますが、場合によっては機能しません。

私が'morten twe'を検索すると、サーバーの結果がselectに表示されます。 しかし、私が'morte twe'（最初の名前の1文字だけ少ない）を検索すると、リストは表示されず、選択ボックスは結果ではないように見えます。私は両方の検索用語をテストしており、それらの両方がまったく同じJSONを返す

：サーバーが正常にデータを返すとき

{ 
    "result": [ 
     { 
      "pers_id": 123456, 
      "first_name": "Morten", 
      "last_name": "Twellmann" 
     } 
    ] 
} 

、なぜ何も表示されませんか？

Answer 1

react-selectは、デフォルトでクライアント側のフィルタリングを行います。したがって、APIが値を返す場合でも、react-selectはそれを除外します。使用するデフォルトのフィルタ実装はhereです。 Asyncが使用するSelect.jsにはfilterOptions propがhereという名前で表示されています。

デフォルトのフィルタリングでは、基本的に部分文字列、大文字と小文字を区別しない同等かどうかをチェックするだけです。値が表示されていない場合は、検索と結果の間に違いがあるため、除外されます。

独自のfilterOptions関数を使用してデフォルトを上書きすることも、undefinedを渡してclientsideフィルタリングを完全に無効にすることもできます。