🦔

TSでsetStateの初期値にlocalStorageの値か空の配列をセットしたい

2023/07/17に公開

やりたいこと

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合体演算子(??)を使用して、空配列を返している。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

Discussion