Vue 報錯Error in render: “TypeError: Cannot read properties of null (reading ‘xxx’)” found in

 前端vue報錯 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'name')" found in         ****** 返回值接收時出Type錯誤往下翻

 

這個錯誤是不能加載屬性為null的類型 我用了一個笨辦法，把頁面上的null值都ctrl+f標注出來然后都修改成0（0方便寫點），然后我發現當前頁面的錯誤並沒有改變，

最后我定位到了錯誤不在當前頁面，在我調用的子組件里面，我調用的是一個彈窗

 

 

當我把這個引用刪除的時候就不報錯了，也就是說我引用的時候出現了錯誤
我又用笨辦法定位，把所有null屬性的值改為有值的。這個時候我的錯誤提示就出現了變化
最后定位到我接收的屬性從nulll改為[]，這也是我的馬虎導致的問題

 

 

 改為

 

 

                        還有一種就是訪問接口返回值接收時出Type錯誤

export default {
  data() {
    return {
      tableData: null,
   },

  methods: {
    search() {this.axios.post("/api/xxx/xxx", this.filter).then((res) => {
          this.tableData = res.data;//一般來說都是這里返回值錯誤

      });
    },

 

比如使用的時候

          <el-button-group class="pull-right">
            <el-button
              size="medium"
              type="primary"
              @click="gotoAdd(tableData.length)"
              >xx</el-button
            >

這個時候就會報錯誤 當 res.data為空時，那   this.tableData就等於null  這個時候你對 TableData做任何事情都是會報錯，請注意這一點小細節

  methods: {
    search() {this.axios.post("/api/xxx/xxx", this.filter).then((res) => {
            if(res.data!=null){//一般來說都是這里返回值錯誤
              this.tableData = res.data;  
               } 
          });
      },

不要讓他賦值進去就行

 

希望能幫助到你