背景
業務ではまったエラーです。
個人的には、TypeError: Cannot read properties of undefined (reading '***')というエラーは自分のような経験の浅い人にとっては原因を見つけづらいエラーの一つだと思い、今回記事にまとめました。
*コードはフェイクですので少しわかりづらいかも。
原因から考えると解決方法は複数ありそうですが、一つの参考になれば嬉しいです。
前提(今回のストーリー)
例えばユーザー登録されたユーザーが複数いて、admin権限を持つユーザーが一人だけという内容の以下のデータがあり、このデータをAPIで取得しているとする。
// APIにてusersを取得したとする
users = [
{ id: 1,
userName: 'suzuki',
admin: true
},
{ id: 2,
userName: 'tanaka',
admin: false
},
{ id: 3,
userName: 'sasaki',
admin: false
},
]
上記の中のadmin権限を持つユーザー情報だけを表示したいときに、以下の状態だとエラーが出る。
export const App = () => {
// この時点でusersは空配列
let users = []
// ①この時点でユーザーデータ取得のAPIが走る(useEffectを用いたdispatch)
// adminUserを抽出
const adminUser = users.filter(user => {
return user.admin === true
})
// 一度目のレンダリング(この時点では①の取得が完了していない)
// ↓↓の時点でエラーが発生
const adminUserDisplay = () => {
return adminUser[0].userName
}
// ②APIによるユーザーデータ取得完了した時点で、このタイミングでadminUserDisplayを実行したいが、上記エラーで止まってしまっているため実行できない。
return (
<>
<div className="App">
<h1>adminUserを表示</h1>
<div>{adminUserDisplay()}</div>
</div>
</>
);
}
少しわかりづらいかもしれないが、上記のようにadminUserを取得する処理が上記コンポーネントが描画されるまでに間に合わず、usersが空になっていたことで今回のエラーTypeError: Cannot read properties of undefined (reading '***')が発生した。
直訳すると、「タイプエラー: 未定義のプロパティは読み込めません。」
*タイプエラーのタイプは型という意味
// console.logでadminUserを出力すると空配列が出力される
console.log(adminUser)
// >> []
解決方法
上記の場合、usersデータを取得できる前とできた後で２回レンダリングされる。
取得できる前にエラーが発生してしまい、２回目のレンダリングが走らない状況だった。
なので、１回目のエラー回避をしてあげれば２回目のレンダリングまでたどり着けるはず。ということでadminUserDisplayメソッドに以下の条件を追加することで解決できた。
if (typeof adminUser[0] !== 'undefined') {
return <div>{currentMainUser[0].id}</div>
typeof演算子（undefined判定）
if (typeof adminUser[0] !== 'undefined')｀ 要はadminUser[0]がundefinedじゃない場合にreturnするという簡単な条件。 単純にadminUser[0] !== 'undefined'`だと以下のエラーとなる。
if (t === 'undefined') {
console.log('t is undifined!!')
}
// >> Error: t is not defined
undefinedは'undefined'だとundefindだと認識してくれない。
伝わるだろうか？'undefined'は文字列のundefinedとして認識されるので、状態としてのundefinedではない。
Primitive（プリミティブ）
-
undefinedのようにメソッドを持たないデータのことをプリミティブと呼ぶそうです。 - 文字列、数値、BigInt、真偽値、undefined、シンボルの６種類
- プリミティブは全てイミュータブル（変更不可）
→つまり、consoleやエラーで吐かれるundefinedは文字列としてのundefinedではないんですね。
そこで、typeofを使うことでundefined状態なのかを判定できる。
if (typeof t === 'undefined') {
console.log('t is undefined!!')
}
// >> "t is undefined!!"
typeof演算子の後に変数を置くことで、変数の型を返してくれる。
*変数だけじゃなく、数値、文字列でも型を返してくれる
console.log(typeof t)
// >> "undefined"
console.log(typeof 10)
// >> "number"
console.log(typeof "hoge")
// >> > "string"
懸念点
一旦これでエラーを回避することはできた。
しかし、xがnull, falseなどのtypeof x === 'undefinded'が好ましくない場合もあるので注意が必要。
学び
-
TypeError: Cannot read properties of undefined (reading '***')の難しさはなぜundefinedになっているかを考える必要がある部分にある - undefinedの判定にはtypeofを使う必要がある
- null, falseなどの値をとりうるのか、など考えることが増えた
参考