在React中检查未定义

Question

我有一个场景,我将数据从reducer传递到我的反应状态.

数据:

{
    "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"]
    })
}

我收到此错误:

单击调试器并加载内容后,未定义主体的错误消失.无论如何我能解决这个问题吗？

我试着像这样检查undefined:

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

但这也不起作用,我相信这是因为博客未定义.

Answer 1

你可以做的是检查你的道具是否最初定义,检查是否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"]
       })
    }
}

您不需要使用type来检查undefined,只需要使用strict运算符!==来比较值的类型和值

为了检查undefined,您也可以使用typeof运算符

typeof nextProps.blog.content != "undefined"

Answer 2

我遇到了同样的问题......我通过使用得到了解决方案 typeof()

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

你必须使用typeof()来识别undefined

Answer 3

如果您还需要检查是否nextProps.blog不是undefined；您可以在一条if语句中完成此操作，如下所示：

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

并且，当不需要undefined,empty或值时；null你可以让它更简洁：

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

Answer 4

您可以尝试添加一个问号，如下所示。这对我有用。

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