【Next.js】値が連動して変更されてしまう挙動の解決方法について（インスタンスの理解）

はじめに

開発中、ボタンをクリックした時点で時間を操作したいと思いました。その実装実現につまずいたため共有させていただきます。
実現したいことは、下記でいうとボタンをクリックした時にtargetDateが持っている時間から1日引いた時間をprevDateに設定したい。ということになります。

下記のような記述をしており、実際はprevDateだけじゃなくtargetDateも変更されていました。

.tsx

　const [targetDate, setTargetDate] = useState<Date>(new Date());
  const [today, setToday] = useState<Date>(new Date());
  const [prevDate, setPrevDate] = useState<Date | undefined>();

  // 本日
  const todayValue = new Date();
  setToday(todayValue);

  // 5日先
  const target = new Date(todayValue);
  target.setUTCDate(target.getUTCDate() +5);
  setTargetDate(target);

  // targetDateの1日前にしたい
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    const prev = targetDate;
    prev.setUTCDate(prev.getUTCDate() - 1);
    setPrevDate(prev);
  }

/////////// 下記で表示 ///////////////
  
    <h3>todayの値：{today?.toISOString()}</h3>
    <h3>targetDateの値：{targetDate.toISOString()}</h3>
    <h3>prevの値：{prevDate?.toISOString()}</h3>
    <button onClick={handleClick}>ボタン</button>  

解決方法

targetDateをインスタンス化する（新たな箱を作る）

.tsx

  const [targetDate, setTargetDate] = useState<Date>(new Date());
  const [today, setToday] = useState<Date>(new Date());
  const [prevDate, setPrevDate] = useState<Date | undefined>();

    // 本日
    const todayValue = new Date();
    setToday(todayValue);

    // targetDateの1日前にしたい
    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    const prev = new Date(targetDate); // ← 修正
    prev.setUTCDate(prev.getUTCDate() - 1);
    setPrevDate(prev);
  }


  /////////// 下記で表示 ///////////////
  
    <h3>todayの値：{today?.toISOString()}</h3>
    <h3>targetDateの値：{targetDate.toISOString()}</h3>
    <h3>prevの値：{prevDate?.toISOString()}</h3>
    <button onClick={handleClick}>ボタン</button>  
    

まとめ

おわりに

ここにきてnew ってそういうことだったのかと理解することができました。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼