快捷導(dǎo)航

后端報TypeError:Cannot?read?properties?of?null?(reading?‘xxx‘)的錯誤解決

更新時間：2023年05月24日 09:46:38 作者：互聯(lián)網(wǎng)全棧開發(fā)實戰(zhàn)

這篇文章主要給大家介紹了關(guān)于后端報TypeError:Cannot?read?properties?of?null?(reading?‘xxx‘)錯誤的解決辦法,這個錯誤是開發(fā)中常見的錯誤之一,需要的朋友可以參考下

1. 文章目錄

今天測試小姐姐，在測試某頁面時，報出如下圖的錯誤：

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. 分析問題

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

ChatGPT無法回答我的問題，我只能自己分析此錯誤了。

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

也就是說，json存在null值的對象。

因為，前端使用amis框架，后端需生成amis格式的json對象。

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

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

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

實際上，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屬性。正因為上述部分代碼值為null，導(dǎo)致amis無法解析到type屬性，即報出TypeError: Cannot read properties of null (reading 'type')錯誤。

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

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

3. 解決錯誤

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

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

重新啟動服務(wù)，即可正常訪問，無報錯信息：

4. 問題總結(jié)

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

本來你正常的json對象，存在某個屬性，框架能夠解析該屬性。

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

總結(jié)

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

您可能感興趣的文章: