onClick時に重複していなければ値を配列に追加したい。

ブルダウンで値を選び、横にあるボタンをクリックした時に、選択しているプルダウンの値（オブジェクト）と同じオブジェクトが配列に入っていなければ追加するという処理を行いたいです。
現在はボタンのonClickで以下のように実装をしています。

  const initialRows = {
    account: {key: 0, value: ""},
    building: {key: 0, value: ""},
    floor: {key: 0, value: ""},
  }
  const [selectedRows, setSelectedRows] = useState([]);
  const [selectedRowOfSelect, setSelectedRowOfSelect] = useState(initialRows);

 //ボタン部分(nameは引数で渡しています)
  <Button variant="contained" color="primary" onClick={() =>
 {setSelectedRows([...selectedRows,selectedRowOfSelect[name])}}
                  選択</Button>

ですが、現在は重複している値であっても配列に追加されてしまいます。
イメージとしては
selectedRows = [
{key: 1, value: "アカウント１"}
{key: 3, value: "floor3"}
]
とあったとして{key: 3, value: "floor3"}が入ってこようとした場合は追加できない、{key: 3, value: "アカウント１"}の場合は追加できる
オブジェクトのキーバリューともに一致している場合は追加できないといったイメージです。

上記を実装するためのonClick時の処理をどのように記述をすればよいのかがわからないため教えていただけませんでしょうか。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

素直に追加先の配列を走査して、同じkey, valueがないかをチェックすれば良いと思います。
配列にはfind関数があって、条件に合う要素を返してくれます。
なので

js
1const newRow = selectedRowOfSelect[name]
2const dupObject = selectedRows.find((row) => row.key === newRow.key && row.value === newRow.value)
3if (!dupObject) { // 見つからなければundefinedが返る
4    setSelectedRows([...selectedRows, newRow])
5}