const param = history.location.state["param"];
＿人人人人人人人人人人人人人人人人人人＿
＞ オブジェクト型は 'unknown' です。 ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣
概要
-
TypeScriptで構築した -
Reactのプロジェクトにて -
LinkまたはuseHistory.pushで設定したstateの値を
取得するためのワークアラウンド的な実装のメモ。
実装
stateに値を設定したはいいものの、Propsとかどう書けばいいの？
実装方法がわからんなー、と困っていまして。以下の様にして対処しました。
stateの値を取得するための関数は以下ように実装しました。
ポイントは一度any型に変換をかけるところです。
これでJavaScript同様にブラケットを使ったプロパティアクセスができるようになります。
stateの取得
const getState = (state: any, name: string): string =>
(state as any)?.[name] ?? "";
あとはリンクにstateを仕込み、必要に応じて値を取り出すだけです。
stateの設定
<Link to={{ pathname: "/", state: { param: "top" } }}>トップ</Link>
stateの取得
const history = useHistory();
const param = getState(history?.location?.state, "param");
オプショナルチェイニング演算子を活用すればかなり簡潔に記述できますね。
Optional chaining (?.) - JavaScript | MDN
オプショナルチェイニング演算子 ?. は、接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照が正しいかどうかを明示的に確認せずに読み込むことを可能にします。 ?. 演算子の機能は . チェーン演算子と似ていますが、参照が nullish (null または undefined) の場合にエラーとなるのではなく、式が短絡され undefined が返されるところが異なります。 関数呼び出しで使用すると、与えられた関数が存在しない場合、 undefined を返します。
注意
これは手っ取り早く実装を済ませるための、その場しのぎ的な方法です。
適切なPropsの設定などがおそらくあるはず。
他に適した実装が無いか、注意深く検討してください。