特定のアルバムで「写真詳細」クリック時にクライアントサイドエラーが発生

[diffshare]

問題の詳細

特定のアルバムで「写真詳細」をクリックすると、アプリケーションエラーが発生し、以降操作ができなくなります。エラーメッセージは「Application error: a client-side exception has occurred (see the browser console for more information)」と表示されます。

また、dev 環境では以下のようなエラーメッセージが確認されました。 "Error: Objects are not valid as a React child (found: [object Number]). If you meant to render a collection of children, use an array instead."

これらのエラーから、imgsのコード上に問題があると考えられます。

再現手順

1. 問題が発生する特定のアルバムを開きます。
2. 写真詳細をクリックします。

期待する動作

• 写真詳細が正常に表示されること。

実際の動作

• 「写真詳細」をクリックすると、アプリケーションエラーが発生し、操作ができなくなる。

システム情報

• ブラウザ: Google Chrome 114.0.5735.110
• OS: Windows 10

この問題に対する修正の提案や追加情報があれば、それをここに記述してください。

[cat-in-136]

exif-js パッケージによって戻される tags['FNumber'] などはネイティブの整数ではなく Number クラスのインスタンスです。

https://github.com/exif-js/exif-js/blob/53b0c7c1951a23d255e37ed0a883462218a71b6f/exif.js#L640

                        vals[n] = new Number(numerator / denominator);
                        vals[n].numerator = numerator;
                        vals[n].denominator = denominator;

したがって {tags['FNumber']} は、"Error: Objects are not valid as a React child (found: [object Number]). If you meant to render a collection of children, use an array instead." というエラーを出力します。