朝活141日目　複数ポイントの実装

昨日でドロップダウンメニューは作れたから、今度はそのメニュをクリックしたら内容が変わるようにリンクを埋め込んでいく。
あとはメニューを登録したポイントの分だけ出力するように変えていく。

まずは次のポイントを登録しておこう。
東シナ海がわの西方海水浴場を登録。
ここは梅雨時期とが冬によくナビが立つところですねー

REACT_APP_NISHIKATA_POINT="西方海水浴場"
REACT_APP_NISHIKATA_COORDS=31.911186, 130.224127

あれー
反映されないー
って何回もやってるけど、流石に今回はすぐ気づいたぞ！！
環境変数だからDocker再起動しないと読み込まれない！！

30秒で気付けたぜ
俺でなきゃ見逃して、、、はない。

おkおk。
んじゃリンクを埋め込んでいこう。

const points = [
    { id: "koigaura", name: process.env['REACT_APP_KOIGAURA_POINT'] },
    { id: "nishikata", name: process.env['REACT_APP_NISHIKATA_POINT'] },
];

中略

 {points.map((point) => (
                    <MenuItem key={point.id} onClick={handleClose} component={Link} to={`/points/${point.id}`}>
                        {point.name}
                    </MenuItem>
                ))}

ボタンでポイント名が変わるようにはなったけど、値が変わってない。
多分useEffectで値が変わったことを検知できてないんだと思ってる。

  useEffect(() => {
    const getOrders = async () => {
      try {
        console.log(point);
        const ordersData = await fetchWaveData(point);
        setWaveData(ordersData);
        console.log(ordersData);
      } catch (error) {
        console.error(error);
      }
    };

    getOrders();
  }, [point]);

poinを監視するようにしたら、無事動的に変えることができましたー！
ちょっとタイムラグあるから、その部分は欲をいえばローディングしてるーみたいな感じにしたいけど、まあいいでしょう！

Issueにしとこう

よしよし

今日はここまでかなー