web-dev-qa-db-ja.com

破壊を行っているnullのプロパティを読み取ることができません

破棄はクールですが、ネストされたオブジェクトの破棄を行うときに深刻な問題が発生し始めます。私はこのコードを持っています：

const {
      credit: { amont },
    } = userProfile

クレジットがnullの場合はどうなるので、これは危険です。アプリ全体が壊れます。どうすればこれを防ぐことができますか？ TypeScriptを使用する方法が1つあることは知っていますが、使用したくありません。ネストされたものを破棄しても、ドットを使用するのと何の違いもないのではないかと疑うようになりました。

javascriptreactjsecmascript-6destructuring
8
Hoknimo

深い破壊でこれを解決することは不可能です。別の回答が示唆するように、 デフォルト値 を使用することは可能ですが、それらはundefined値にのみ適用されます。

const { credit: { amont } = {} } = userProfile || {};

null値は依然としてエラーになりますが、nullになる可能性のあるすべてのオブジェクトに対して短絡評価を行う必要があります。

const { credit } = userProfile || {};
const { amont } = credit || {};

これは、パスを読み取り、null値をチェックする安全なナビゲーションユーティリティ関数で対処できます。

有名な例は Lodash get ：です。

const amont = _.get(userProfile, 'credit.amont');

TypeScriptを使用する方法が1つあることは知っていますが、ここでは使用しません

タイプの安全性が保証されている場合にのみ、TypeScriptでこれに対処することができます。 userProfileがJSON応答からのものである場合、オブジェクトがnullではないことを表明するために、ランタイムタイプチェックを適用する必要があります。

13
Estus Flask

破棄中にデフォルト値を指定することで、アプリのクラッシュを回避できます。

const {
  credit: { amont } = {},
} = userProfile
console.log(amont); //amont will be undefined

後で、どこで使用していても!!amontでamontを確認できます。

1
Sakhi Mansoor