宿泊プラットフォームの再構築-期間選択クエリーを入力すると、無限ループに陥るエラーを解決します.

URIウィンドウとカレンダ入力値を考慮する必要があります.

質問する

これは、再構築が1回行われたコードで、checkin、checkoutをキーにクエリーが直接追加されます.dates=checkin='2022-04-23'&checkout=...の形式でdatesを入力する必要があるため、他の論理が必要になります.

  const checkinDate = URLSearch.get('checkin');
  const checkoutDate = URLSearch.get('checkout');
  const handleDatesChange = ({ startDate, endDate }) => {
    setStartDate(startDate);
    setEndDate(endDate);
  };

  useEffect(() => {
    startDate && URLSearch.set('checkin', startDate.format('YYYY-MM-DD'));
    endDate && URLSearch.set('checkout', endDate.format('YYYY-MM-DD'));
    navigate(`/list?` + URLSearch.toString());
  }, [focusedInput]);

実施すべき内容

モードウィンドウで期間を選択すると、URLウィンドウにクエリーが入力され、検索ページの宿泊期間にもクエリーが入力されます.

検索ページで宿泊時間を選択した場合は、URLウィンドウにクエリーを入力する必要があります.

検索ページで再びモードウィンドウを開いて時間を選択する場合は、検索ページの宿泊時間に入力する必要があります.

検索ページの宿泊時間を選択すると、カレンダーにチェックイン日とチェックアウト日を入力するたびに、クエリーリストをリアルタイムで更新する必要があります.

難点-制約

カレンダ・ライブラリの使用
airbnbが提供するreact-datsライブラリを新たに導入しました.以前使用したライブラリはhype-serverです交換の理由は以下の通り.

正常なライブラリの更新と管理

処理不可予定日

カスタマイズ可能なプロジェクト

しかし、意外な制約要因がある.
このカレンダーライブラリは、次の原理で動作します.
カレンダーをクリックするたびにfocusedInputというpropがstartDate、endDate、nullに変更されます.最初のstartDateでは、カレンダーの日付をクリックすると購読開始日として選択され、endDateでは、選択した日付が購読の最後の日付となり、購読区間が表示されます.空の場合、カレンダーは消えます.
開始日と終了日はそれぞれstartDateとendDateに更新されます.
でも一度に対象アイテムとして入れると1つnullに更新されます個別の管理が必要です.

質問する

既存

非同期の問題

approach 1

各URI変更

モードウィンドウで再度期間を選択すると、URLウィンドウに反映されますが、カレンダーには反映されません.

approach 2

useQuery StringObjectが管理する上ポインタ値を更新し、urlウィンドウを変更するたびに更新します.
urlウィンドウのアドレスが変更されるたびに、dateキー値であるクエリーリスト値がオブジェクトに変換され、通常値に更新されます.
この値に基づいてurlウィンドウ、カレンダーの入力ウィンドウ、選択値を更新します.

const URLSearch = new URLSearchParams(location.search)
const dates = URLSearch.get('dates')

  useEffect(() => {
    const newDates = parseQueryIntoObject(dates);
    setSelectedListObject(newDates);
  }, [location.search]);

カレンダーフォーカスInputを変更するたびに実行される関数prop onFocus ChangeにhandleDatesChange関数が渡されます.startDateとendDateの値を更新し、カレンダーで日付を選択すると、カレンダーの入力ウィンドウに入力した値が表示されます.

  const handleDatesChange = ({ startDate, endDate }) => {
    startDate &&
      setSelectedListObject({
        ...selectedListObject,
        checkin: startDate.format('YYYY-MM-DD').toString(),
      });

    endDate &&
      setSelectedListObject({
        ...selectedListObject,
        checkout: endDate.format('YYYY-MM-DD').toString(),
      });
    setStartDate(startDate);
    setEndDate(endDate);
  };

react-dataはformatメソッドを使用して、momentオブジェクトに値を返すため、値を日付フォーマットに変換します.ただし、値がない場合はエラーが発生するため、startDate、endDate&&演算子が追加され、各値が存在する場合にのみ論理が処理されます.
悪いところは、彼らがそれぞれ2つの常臍値を同時に管理していることだ.
また、検索ページでカレンダをクリックするとurlウィンドウのクエリーをリアルタイムで更新する必要があるため、柱としてカレンダライブラリに渡されるfocusedInput値が変更されるたびに、変更された定数がurlウィンドウに入力されるようにクエリーリストに変換されます.

  useEffect(() => {
    parseObjectToSearchParams();
  }, [focusedInput]);

問題は、無限ループに陥った!

approach 3

まず、この分野は他のプロジェクトとは異なり、国の管理は必要ありません.これは、レンダリングによって画面に変化した値を表示する必要がないためです.たとえば、チェックボックスまたはスライダは、臍帯値の変化に伴って選択またはスライドの位置を反映する必要がありますが、この領域にはこのような部分はありません.stateの更新時に無限ループに陥るため、通常のオブジェクトに置き換えます.

urlウィンドウが変化するたびに宿泊中に表示されるように、クエリー・リストをオブジェクトに変換し、値を入れます.

  useEffect(() => {
    const newDates = parseQueryIntoObject(dates);
    setStartDate(moment(newDates.checkin));
    setEndDate(moment(newDates.checkout));
  }, [location.search]);

次に、カレンダで日付を選択するたびに、選択した日付がオブジェクトに追加され、クエリーに変換されurlウィンドウが更新されます.

  const handleDatesChange = ({ startDate, endDate }) => {
    const queryString = URLSearch.get('dates');
    const queryObject = parseQueryIntoObject(queryString);

    if (startDate) {
      queryObject.checkin = startDate.format('YYYY-MM-DD');
      if (endDate) {
        queryObject.checkout = endDate.format('YYYY-MM-DD');
      }
      parseObjectToSearchParams(queryObject);
      setStartDate(startDate);
      setEndDate(endDate);
    }

他の検索項目については、チェックボックスやスライダのように再レンダリングを行い、画面に更新事項を表示する必要がありますが、宿泊時間を選択したこのコンポーネントでは、追加の内容は必要ないので、上記のコードも十分利用できます.

もっと考えたいこと。

startDate,endDate条件文:ライブラリを使用するため、指定したアイテムを使用する必要があり、条件文が乱雑になります.startDateとendDateは、上記のコードを記述しています.値を入力するとnullの値が1つになるため、オブジェクトとして管理できません.これまでreact-deadsを使用する他の人のコードを検索したところ、この部分を解決するコードはまだ見られず、より良い方法を見つけたいと考えています.

論理自体への悩み:最終的に汎用論理を再利用できなかった.必要がなければ使わなくてもいいですが、もっときれいな共同応用の方法があるかどうか考えてみたいです.