在 React 中检查未定义

IT技术 reactjs components redux undefined
2021-03-28 01:56:47

我有一个场景，我将数据从减速器传递到我的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"]
    })
}

我收到此错误：

在此处输入图片说明

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

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

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

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

5个回答

您可以做的是通过检查是否nextProps.blog.content未定义来检查您的props是否最初定义，因为您的身体嵌套在其中，例如

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"
没问题 。乐于帮助
2021-05-27 01:56:47
啊，我明白了，我把 undefined 放在引号中。这成功了。谢谢！
2021-06-01 01:56:47

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

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

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

感谢@Tom 发现了我的错误。
2021-06-07 01:56:47
因为 OR 在这里是错误的！它应该是 AND。我们想要：not undefined AND not null。两者都应该是真的。
2021-06-10 01:56:47
为什么你投反对票你能有充分的理由发表评论吗？
2021-06-17 01:56:47

如果您还需要检查 if nextProps.blogis not undefined；你可以在一个if语句中做到这一点，就像这样：

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

并且，当undefined, emptyornull值不是预期的时；你可以让它更简洁：

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

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

 componentWillReceiveProps(nextProps) {
    this.setState({
        title: nextProps?.blog?.title,
        body: nextProps?.blog?.content
     })
    }
注意：使用前，请检查您的环境是否支持optional chaining。
2021-06-03 01:56:47

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

ReactObject === '未定义'

类型 undefined是undefined不是String。
2021-05-27 01:56:47
其它你可能感兴趣的问题
上一篇ESlint - 错误：必须使用导入来加载 ES module 下一篇在构造函数或 componentWillMount 中设置初始react组件状态？