你的控制台还在出现 Cannot read properties of null (reading 'xxx') 的报错吗？

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

场景

👔领导给小白橘子一个任务，下午要上线一个新页面。

三下五除二，写好了静态页面，到了联调阶段🤗

后端返回的res数据格式如下：

这个简单，现在把数据渲染上页面就完成了。小白橘子再一个三下五除二：

完成、部署、上线了😁😁

上线后却发现页面报错了🙊🙊，小白橘子打开控制台：

再看看network返回的数据，原来userInfo字段返回的是null。橘子才发现自己的代码写得不够严谨。对代码进行了修改：

但是这个写法也太繁琐了，小白橘子想应该有更简单的写法。

最后终于在网上找到了更简洁的方案💯：

?.  的用法除了上面的场景，还有以下几种哦。

    // 1、当onChange方法存在的时候执行   
    props.onChange?.(value);    
    // 等价于    
    props.onChange && props.onChang(value);  
    
    // 2、当数组长度不为0的时候进行赋值    target = dataSource[0]?.name;    
    // 等价于    
    if (dataSource.length > 0) {      
        target = dataSource[0].name;    
    }   
    
    // 3、当调用一些方法的时候    
    let newStr= str?.splice(1,1)    
    // 等价于    
    if(str){      
        let newStr= str?.splice(1,1)    
    }

学到这种简洁的写法，大大节省了开发时间，看起来也舒服多了。

今天又是学到新知识的一天!😎😎

❤️ 更多前端知识欢迎关注公众号交流