在 React 中检查未定义

Question

我有一个场景，我将数据从减速器传递到我的反应状态。

数据：

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

我得到这个错误：

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

我试图像这样检查未定义：

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，只需要严格的操作符 !== 来比较值的类型和值

为了检查未定义，你也可以使用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
     })
    }

Answer 5

您可以使用以下代码检查未定义的对象。

ReactObject === '未定义'