🦔
TSでsetStateの初期値にlocalStorageの値か空の配列をセットしたい
やりたいこと
useState
の初期値として、localStorageからitemsという値が取得できればそれをセット、なければ空の配列をセットしたい。
その場合以下のようにしたいが、「nullをstringに割り当てられません」というエラーが出る。
もしlocalStorageからitemsが取得できなかった場合nullになるので、JSON.parse()
の引数にnullは指定できないためエラーになる。
const [state, setState] = useState<MyType[]>(
JSON.parse(localStorage.getItem("items")) || []
);
解決方法
以下のようにすれば解決。
const [state, setState] = useState<MyType[]>(
JSON.parse(localStorage.getItem("items") ?? "null") ?? []
);
解説
JSON.parse()
の引数にnullを渡すとnullがかえる性質を利用してNull合体演算子(??)を使用して、空配列を返している。
Discussion