「動的ルーティング」の複数のフィルタの処理(2編:Query Parameterを使用)

今回は、左側にあるフィルタをクリックすると、そのフィルタに対応する製品を表示する機能を実装しようとします.
一度クリックするとフィルタがアクティブになり、ダブルクリックで解除されます.様々な方法が考えられ,最後に以下の3つのステップを達成することができる.

1.フィルタリストのステータスの管理

 const handleFilter = e => {
    let filterArr = filters;
    filterArr.indexOf(e.target.id) === -1
      ? filterArr.push(e.target.id)
      : filterArr.splice(filterArr.indexOf(e.target.id), 1);
    setFilters(filterArr);
    setQueryParameter();
  };

フィルタをクリックするたびにstateと宣言されたフィルタにフィルタリストが配置されます.ただし、既に対応するフィルタがある場合は、パッチで除去します.

2.バックエンドにGETリクエストを生成するURL

 const setQueryParameter = () => {
    let queryParameter = '';
    let addParamFilters = [];
    if (filters) {
      filters.forEach(filter => {
        addParamFilters.push(`${param}-${filter}`);
      });
      queryParameter = `${API.productList}${param}&sub=${addParamFilters}`;
    } else {
      queryParameter = `${API.productList}${param}`;
    }
    setUrl(queryParameter);
  };

最初に作成したフィルタをバックエンドと約束した形式で前処理し、urlステータスを最新に更新します.

3.userEffectによるレンダリングを要求する

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(product => {
        setProducts(product.result);
        setSubtotal(product.count);
      });
  }, [url]);

url値を変更するたびにuserEffectが作成され、変更されたurlリクエストfetchが作成されます.

4.総評

コードやバックエンドと通信することで、スムーズに動作します.
合成中にuserEffect構文にエラーが発生しました.このエラーはfetchからインポートしたurlを下部依存配列に入れることで解決されます.
コードコメントの後に変更が行われた場合は、コードの問題と補足部分を3部作に更新する必要があります.
ではアディオス.