1. 文章目錄

今天測(cè)試小姐姐，在測(cè)試某頁(yè)面時(shí)，報(bào)出如下圖的錯(cuò)誤：

TypeError: Cannot read properties of null (reading 'type')

at w (http://...xxx.../assets/index.a9f96e7f.js:1052:191280)
at x (http://...xxx.../assets/index.a9f96e7f.js:952:39438)
at b (http://...xxx.../assets/index.a9f96e7f.js:952:36266)
at I (http://...xxx.../assets/index.a9f96e7f.js:986:59452)
at div
at div
at div
at div
at S (http://...xxx.../assets/index.a9f96e7f.js:1071:9994)
at x (http://...xxx.../assets/index.a9f96e7f.js:952:39438)
at b (http://...xxx.../assets/index.a9f96e7f.js:952:36266)
at I (http://...xxx.../assets/index.a9f96e7f.js:986:59452)
at w (http://...xxx.../assets/index.a9f96e7f.js:986:51920)
at r (http://...xxx.../assets/index.a9f96e7f.js:1052:16143)
at b (http://...xxx.../assets/index.a9f96e7f.js:967:8581)
at x (http://...xxx.../assets/index.a9f96e7f.js:967:10843)
at w (http://...xxx.../assets/index.a9f96e7f.js:986:66365)
at b (http://...xxx.../assets/index.a9f96e7f.js:952:36266)
at div

即TypeError: Cannot read properties of null (reading 'type')。

2. 分析問(wèn)題

正趕上最近ChatGPT比較火，可以借助它幫助我分析問(wèn)題，如下圖所示：

ChatGPT無(wú)法回答我的問(wèn)題，我只能自己分析此錯(cuò)誤了。

將TypeError: Cannot read properties of null (reading 'type')翻譯成中文，即類型錯(cuò)誤：無(wú)法讀取 null 的屬性（讀取“類型”）。

也就是說(shuō)，json存在null值的對(duì)象。

因?yàn)椋岸耸褂?code>amis框架，后端需生成amis格式的json對(duì)象。

前端拿到amis格式的json對(duì)象后，在amis框架中渲染即可。

由于null對(duì)象的出現(xiàn)，導(dǎo)致amis無(wú)法解析對(duì)應(yīng)的屬性。

于是，去定位出前端null對(duì)象的位置，如下圖所示：

實(shí)際上，headerToolbar的格式如下：

"headerToolbar": [
  {
      "actionType": "dialog",
      "dialog": {
          "body": {
              "api": {
                  "method": "post",
                  "url": "http://xxx/common/2023030905235058401/enterprise/100/add"
              },
              "body": [
                  {
                      "name": "orgname2",
                      "id": "u:20230309052540720",
                      "label": "所在社區(qū)",
                      "type": "input-text"
                  },
                  ......
                  {
                      "name": "ifdanger",
                      "id": "u:20230309052540725",
                      "label": "是否為?；髽I(yè)",
                      "type": "input-text"
                  }
              ],
              "type": "form"
          },
          "title": "新增"
      },
      "level": "primary",
      "id": "u:20230309052540213",
      "label": "新增",
      "type": "button"
  },
  "bulkActions"
]

如上代碼所示，正常情況下，headerToolbar存在type屬性。正因?yàn)樯鲜霾糠执a值為null，導(dǎo)致amis無(wú)法解析到type屬性，即報(bào)出TypeError: Cannot read properties of null (reading 'type')錯(cuò)誤。

接著，再去定位到后端生成null對(duì)象的代碼位置，如下圖所示：

因而，需要修改后端代碼。

3. 解決錯(cuò)誤

根據(jù)以上分析后得知，由于后端生成的null對(duì)象的值，導(dǎo)致amis無(wú)法解釋后端生成的對(duì)象，即可進(jìn)行如下修改：

...
if (isNull(addButton)) {
  curdJsonVm = replace(curdJsonVm, "${headerToolbars},", "");
  log.info("model page info:{}", JSONUtil.toJsonPrettyStr(curdJsonVm));
  return curdJsonVm;
}
curdJsonVm = replace(curdJsonVm, "${headerToolbars}", JSONObject.toJSONString(addButton));
...

重新啟動(dòng)服務(wù)，即可正常訪問(wèn)，無(wú)報(bào)錯(cuò)信息：

4. 問(wèn)題總結(jié)

如果類似TypeError: Cannot read properties of null (reading ‘xxx‘)不是后端造成的，一般是你的json對(duì)象存在null對(duì)象。

本來(lái)你正常的json對(duì)象，存在某個(gè)屬性，框架能夠解析該屬性。

但出現(xiàn)了null對(duì)象后，導(dǎo)致前端框架無(wú)法解析null對(duì)象的屬性。

總結(jié)

到此這篇關(guān)于后端報(bào)TypeError:Cannot read properties of null (reading ‘xxx‘)的錯(cuò)誤解決的文章就介紹到這了,更多相關(guān)TypeError:Cannot read properties of null內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論