reactで new Date() を更新したくない

Question

ご閲覧いただきまして、誠にありがとうございます。

Reactでgif画像を出す際に、コンポーネントが変化するたびに
動いてもらうため、gifの後に現在時刻をいれています。

テストで作ったプロジェクトでは、現在時刻が秒毎に反映されないため
うまくいっていたのですが、なぜか現在のプロジェクトでは
現在時刻が秒毎に反映されるため、2秒くらいでまたgifが開始されてしまい正しく動作していません。

・・・
            <img
              src={`${process.env.PUBLIC_URL}/assets/img/animation-${
                items[0].id
              }.gif?${new Date().getTime()}`}
              alt=""
            />
・・・

更新されることなく、現在時刻をコンポーネントが通るたびの時刻で静止して
取得するためにはどうすればよろしいでしょうか。

抽象的な質問となってしまい、恐縮ですがどうぞよろしくお願いいたします。

追記

コンストラクタに書いてみたのですが、そうすると今度は
イベントを発生する度に、時間をリセットしてくれることがなくなりました。

Answer 1

更新されることなく、現在時刻をコンポーネントが通るたびの時刻で静止して

取得するためにはどうすればよろしいでしょうか。

クラスコンポーネント化して、時間はコンストラクタで生成してしまいましょう。

Comments

[k10a]

ありがとうございます。コンストラクタで用意をしてみました

[k10a]

コンストラクタで用意してみたのですが、そうするとeventごとに同じ結果である場合に時間を更新してくれないということが分かりました。eventを発生する度に時間を更新するためにはどうすれば良いでしょうか。

[maisumakun]

「コンポーネントが変化するたび」の具体的な基準はどのような感じでしょうか。

[k10a]

説明が不足しておりまして申し訳ございません。具体的には、複数色のレンガがあり、クリックをする度にレンガが上に積み重なっていく仕様となり、一番上のレンガと同じ色のアニメーションをクリックして積み重なる度に再生したいと考えています。