3.0 - alpha自動補完フロントエンド

2.9でいくつかのことが起こった.

著者Autocompleteのインデックスをバックエンドで追加されました.

新しい著者autocompleteクエリが作成されましたSearch .

Parser サービスが起動した.

だから3.0アルファで私は対処するために必要ないくつかのことがあった.

Implement autocomplete in the front-end

Add tests for the new query in Search

Add autocomplete indexing in Parser

私はあまりにもだまされなかった.3度目は基本的に丁寧なペーストでした.パーサが正しく動作している限り、インデックスの追加作業が行われます.検索テストについては、この時点でESのモックと私はすでにESの検索クエリをモッキングの面では、お互いに非常に精通している.
フロントエンド.私は正直にそれをする準備ができていなかった.私は、私がこのコースの第2週に反応とフロントエンドから自分自身を誓ったと思いました、しかし、私はバックエンドに入れたので、それはパッケージ取引のすべての部分のようでした.

フロントエンド論理

論理はとても簡単だった.それぞれの時間(または、2、3秒ごとに)検索テキストが変更されている、我々は検索サービスAPIからの結果を取得し、ユーザーのための結果をリストから選択する.
私は、OSD 600 Meが知っていなかったが、またuseEffect , このように見えます.

  useEffect(() => {
    // debounce so it searches every 0.5 seconds, instead of on every stroke
    const debounce = setTimeout(() => {
      (async () => {
        const prepareUrl = () => `${searchServiceUrl}/authors/autocomplete/?author=${text}`;
        // Do the request if there is something to search for
        const shouldFetch = () => text.length > 0;
        const data = await fetchResults(shouldFetch() ? prepareUrl() : null);
        if (data) {
          setOptions(data);
        }
      })();
    }, 500);

私は大抵(func)(); 私は正直なところ、何の名前は何のアイデアがあります.しかし、OSD 600に戻って、私は同じような問題に遭遇しましたuseEffect . 私は、ちょうどこのようなトリックが働くと本当に驚きます.
私が使用しようとした私のバージョンのためにuseSWR , 原因は、他のすべてのコンポーネントを使用していた.しかし、それは私のためにあまりにも奇妙な演技だった.初心者にとっては、APIの結果を正しい変更にしようとしないでしょう.例えば"ro "を入力した場合、"r "から始まる結果を探すだけです.また、バックスペースを使用して検索テキストを削除すると、すべてのキーストロークですべての0.5秒でフェッチを解雇する奇妙な問題があるように思えた.それで、結局、私は古いものとの代わりのルートを探しましたfetch and useEffect .

自動補完コンポーネント

私は自動補完のインデックスを取得しない場合は、このコンポーネントを使用することを選択したフォールバックと思われる.オリジナルのアイディアは、おそらく作者の静的なリストをフィードし、オートコンプリート版のバージョンを作ることができたということでした.それで、ある日、弾性検索が何らかの理由で抜かれるならば、それはフォールバックとしても役に立ちます.

結論

正直に言うと、フロントエンドや一般的なフロントエンドでは、私は本当にあまり好きではないと決められません.しかし、スタイリングの他に、私はただ恐ろしいだけだと認めています.ほとんど私はそれが間違ったテキストを検索していないので、それはまた、バックスペースを含むすべてのキーストロークを使用して火災しないように動作して得たことを誇りに思う.