web-dev-qa-db-ja.com

未定義のReactの確認

リデューサーからデータを自分の反応状態に渡すシナリオがあります。

データ：

{
    "id": 1,
    "title": "Test",
    "content": {
        "body": "sdfsdf"
        "image": "http://example.com"
    }
}

ComponentWillRecievePropsを使用すると、これはタイトルの取得に最適です。

componentWillReceiveProps(nextProps) {
    this.setState({
        title: nextProps.blog.title,
    })
}

ただし、ネストされたフィールドを取得するのは困難です。私がこれを行うとき：

componentWillReceiveProps(nextProps) {
    console.log("new title is", nextProps.blog.title);
    console.log("new body content is", nextProps.blog.content["body"]);
    this.setState({
        title: nextProps.blog.title,
        body: nextProps.blog.content["body"]
    })
}

私はこのエラーを受け取ります：

enter image description here

未定義のボディのエラーは、デバッガーをクリックしてコンテンツがロードされると消えます。とにかくこの問題と戦うことができますか？

私はこのような未定義をチェックしようとしました：

if (typeof nextProps.blog.content["body"] != 'undefined'){

しかし、これも機能しません。ブログが未定義だからだと思います。

reactjscomponentsreduxundefined
27
lost9123193

あなたができることは、あなたの体がその中に入れ子になっているので、nextProps.blog.contentが未定義かどうかをチェックすることによって、あなたが小道具が最初に定義されているかどうかをチェックすることです

componentWillReceiveProps(nextProps) {

    if(nextProps.blog.content !== undefined && nextProps.blog.title !== undefined) {
       console.log("new title is", nextProps.blog.title);
       console.log("new body content is", nextProps.blog.content["body"]);
       this.setState({
           title: nextProps.blog.title,
           body: nextProps.blog.content["body"]
       })
    }
}

タイプを使用して未定義をチェックする必要はありません。厳密な演算子!==だけで、タイプと値によって値を比較します

未定義をチェックするには、次のようなtypeof演算子を使用することもできます。

typeof nextProps.blog.content != "undefined"
25
Shubham Khatri

私は同じ問題に直面していました.....そして、typeof()を使用して解決策を得ました

if (typeof(value) !== 'undefined' || value != null) {
         console.log('Not Undefined or Not Null')
  } else {
         console.log('Undefined or Null')
}

undefinedを識別するには、typeof()を使用する必要があります

3
MD Ashik

nextProps.blogがundefinedではないかどうかも確認する必要がある場合。次のように、単一のifステートメントでそれを行うことができます。

if (typeof nextProps.blog !== undefined && typeof nextProps.blog.content !== undefined) { // }

また、undefined、emptyまたはnullの値が予期されていない場合。より簡潔にすることができます：

if (nextProps.blog && nextProps.blog.content) { // }

1
Souvik Ghosh