web-dev-qa-db-ja.com

ReactJSでnull値を処理する最良の方法？

ReactJSでAPIにアクセスしています。 Reactコンポーネントが、未定義である可能性があるAPIによって提供されるオブジェクトのプロパティにアクセスしているときにクラッシュするのを防ぐ最善の方法は何ですか？

エラーの例は次のとおりです。

TypeError：未定義のプロパティ 'items'を読み取れません

javascriptreactjsjavascript-objects
6
Nathan Horrigan

変数itemsのプロパティxにアクセスしようとしているようです。

また、xがundefinedの場合、x.itemsを呼び出すと、先ほど述べたエラーが発生します。

簡単なこと：

if (x) {
  // CODE here
}

または

if (x && x.items) { // ensures both x and x.items are not undefined
  // CODE here
}

編集：

オプションのチェーン を使用できるようになりました。

if (x?.items)
9
Kenny Meyer

この投稿 は、reactアプリでのいくつかのエラー処理戦略について話します。

しかし、あなたの場合、try-catch句を使用するのが最も便利だと思います。

let results;
const resultsFallback = { items: [] };
try {
  // assign results to res
  // res would be an object that you get from API call
  results = res.items;
  // do stuff with items here
  res.items.map(e => {
    // do some stuff with elements in items property
  })
} catch(e) {
  // something wrong when getting results, set
  // results to a fallback object.
  results = resultsFallback;
}

私はこれを特定の厄介な反応コンポーネントの1つだけに使用していると思います。同様のタイプのエラーを処理する場合は、上記のブログ投稿でReactTryCatchBatchingStrategyを使用することをお勧めします。

2
Mμ.
  • 単純な関数では、ifステートメントで簡単に実行できます。
if(typeof x !=='undefined' && typeof x.item !=='undefined'){

}
  • jSXでは、この方法で行います。
render(){
return(
          <div>
          (typeof x !=='undefined' && typeof x.item !=='undefined')?
                <div>success</div>:           
                <div>fail</div>
          </div>
          )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
2
Rajat Gupta

このような問題をチェックする最良の方法は、Googleのコンソールでテストコードを実行することです。 nullチェックの場合と同様に、単純にif(!x)またはif(x==undefined)をチェックできます。

0
keshav goswami