解决口苦最快的方法(解决的英文)

解决TypeError:Cannotreadpropertiesofnull(reading'xxx')

文章目录

1.文章目录2.分析问题3.解决错误4.问题总结1.文章目录

今天测试某个页面时，测试妹子报错如下图：

TypeError:无法读取w()atx()的null属性。JS:952:39438）atB在x在b在w。

2.分析问题

ChatGPT最近很流行。我可以用它来帮助我分析问题，如下图：

ChatGPT无法回答我的问题，我只能自己分析这个错误。

将TypeError:Cannotreadpropertiesofnull(reading'type')翻译成中文，即TypeError:Cannotreadpropertiesofnull(reading'type')。

也就是说，json中存在一个值为null的对象。

因为前端使用amis框架，所以后端需要生成amis格式的json对象。

前端拿到amis格式的json对象后，就可以在amis框架中进行渲染了。

由于null对象的出现，amis无法解析对应的属性。

所以，定位到前端空对象的位置，如下图：

其实headerToolbar的格式如下：

'headerToolbar':[{'actionType':'dialog','dialog':{'body':{'api':{'method':'post','url':''},'body':[{'name':'orgname2','id':'u:20230309052540720','label':'社区','type':'输入文本'},{'name':'ifdanger','id':'u:20230309052540725','label':'是否为危化品企业','type':'input-text'}],'type':'表单'}，'标题':'新'}，'级别':'主要'，'id':'u:20230309052540213'，'标签':'新'，'类型':'按钮'}，'bulkActions']

如上面代码所示，正常情况下，headerToolbar有一个type属性。由于上述部分代码值为null，导致amis无法解析type属性，即报TypeError:Cannotreadpropertiesofnull(reading'type')错误。

然后，找到后端生成null对象的代码位置，如下图：

因此需要修改后端代码。

3.解决错误

根据上面的分析可知，由于后端生成的空对象的值，导致amis无法解释后端生成的对象，因此可以进行如下修改：

.if(isNull(addButton)){curdJsonVm=替换(curdJsonVm,'${headerToolbars},','');log.info('型号页面info:{}',JSONUtil.toJsonPrettyStr(curdJsonVm));返回curdJsonVm;}curdJsonVm=替换(curdJsonVm,'${headerToolbars}',JSONObject.toJSONString(addButton));

重启服务即可正常访问，没有任何错误提示：

4.问题总结

如果像TypeError:Cannotreadpropertiesofnull(reading‘xxx’)这样的错误不是由后端引起的，通常是因为您的json对象中存在null对象。

本来，你普通的json对象是有一定属性的，框架可以解析这个属性。

但是，当出现空对象时，前端框架无法解析空对象的属性。