Reactで条件を切り替えても地図が更新されない原因（Supabase × Google Maps）

はじめに

React × Supabase × Google Mapsを使用し、
「WiFi・電源・声出しOK」の条件を切り替えるフィルター機能を作っていました。

しかし、WiFiボタンを押してもピンが変わらない状況に遭遇しました。

原因

// 状態
const [filters, setFilters] = useState({
  wifi: false,
  power: false,
  voice: false, // ← React側の名前
});

// データ
spot = { name: "カフェA", wifi: true, power: true, talking: true }; // ← Supabase側

filter() では spot.voice を見ていましたが、
実際のデータは spot.talking。
存在しないプロパティを見ていたため、常に条件不一致になっていました。

修正後

const [filters, setFilters] = useState({
  wifi: false,
  power: false,
  talking: false, // ← 名前を統一
});

const filteredSpots = spots.filter((spot) => {
  if (filters.wifi && !spot.wifi) return false;
  if (filters.power && !spot.power) return false;
  if (filters.talking && !spot.talking) return false;
  return true;
});

これでボタンを押すと、
ちゃんと地図のピンが切り替わるようになりました。

まとめ

命名の一貫性を保つことが、アプリを正しく動かす鍵となる。