インタラクティブ配列のオブジェクト重複値の削除

apiからコート情報を取得しselectに入れる過程で問題が発生した.

私が欲しいのは、このようにフィルタリングされたデータで、すべての球場の住所が追加されたので、ソウル市の500の京畿道も500の選択肢に入った.

多すぎる住所
まず,空の値を除去する新しい配列を作成した.

 let locCdSet = []
 
 if (courts) {
    for (let item of courts.content) {
      if (item.locCd) {
        locCdSet.push(item.locCd)
      }
    }
  }

次に、戻り値でfilterを使用して重複値を再度除去し、マッピングします.

       <Select
              className="address_select"
              placeholder="시/도"
              onChange={handleLocSdChange}
            >
              {locCdSet
                .filter(
                  (arr, index, callback) =>
                    index ===
                    callback.findIndex((loc) => loc.locSdName === arr.locSdName)
                )
                .map((address) => (
                  <Option key={address.locSd} value={address.locSdName}>
                    {address.locSdName}
                  </Option>
                ))}
            </Select>

filterの3番目のパラメータはcallbackです.配列の値をcallback関数に渡し、これらの値がcallback関数で定義された基準に合致するかどうかを確認し、trueのみを収集して戻ります.
注:>https://kyounghwan01.github.io/blog/JS/JSbasic/dupulication-property-remove/#filter
無限関数の世界...