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

4242 ワード

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 .

    自動補完コンポーネント


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

    結論


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