Zenn
📚

三項演算子でデータが取得できているかいないかで表示を分ける

2023/03/12に公開
Laravel
tech

strictモードで詰まってたおはなし

今回の開発は、フロントをReact(Next.js)、バックをLaravel(API)で作成しています

const { user } = useAuth({ middleware: 'auth' })

この関数はログインしている人の情報を取得し、userという変数に格納しているコードです

取得したデータは以下のようになっています

id: 2
name: "三宅 陽子"
email: "minoru03@example.com"
email_verified_at: "2023-03-12T03:45:44.000000Z"
post_code: "2918038"
address: " 岩手県大垣市西区加藤町中島8-8-6 ハイツ加納102号"
icon_path: "/storage/icon_images/108ccf0c-e8e0-3b91-a2e8-00bc08b2d1ec.png"
created_at: "2023-03-12T03:45:45.000000Z"
updated_at: "2023-03-12T03:45:45.000000Z"

この取得したデータを使用して、imgタグのsrc属性にuser.icon_pathを指定しようとしたところ
次のエラーが発生しました

TypeError: Cannot read properties of undefined (reading 'icon_path')

imgタグには取得してきたデータを使用するために、下記のようにsrcを指定していました

<img 
  src={`${process.env.NEXT_PUBLIC_BACKEND_URL}${user.icon_path}`} 
  alt='icon'>

process.env.NEXT_PUBLIC_BACKEND_URL は バックのUrlが入っています(envで指定)

データがとれていない？！！？！？？！？？！？

確認でconsole.log(user)をしてみると、、、

1回しかconsole.logしていないのに2回動いてる...
しかも1回目がundefined...

ここでstrictモードで2回走ることを思い出しました
そして1回目でデータを取得できていないにも関わらずuser.icon_pathを使用していたため、
undefinedとなりエラーを吐いていました

解決方法

<img 
  src={user?.icon_path ?  `${process.env.NEXT_PUBLIC_BACKEND_URL}${user.icon_path}` : 'icon.png'}
  alt="icon"

user?.icon_pathが存在する場合には、{process.env.NEXT_PUBLIC_BACKEND_URL}{user.icon_path}にリンクされるuser?.icon_pathが存在しない場合 (nullも)には、代替の画像ファイルであるicon.pngが表示される

上記のようにすることで、データを取得できていないときはデフォルトの画像を
取得できているときはその画像を表示することができました

Discussion