Solved: TypeError: Cannot read properties of undefined (reading 'name' )

wrong description

TypeError: Cannot read properties of undefined (reading ‘name‘ )

1. This error is quite common in the front-end. Generally, the attribute that is prompted is not written correctly. However, if it is just such a simple error, there is no need to write a blog to record it.
2. As for this error, the most common solution is to check the "name" he prompted to see where it is wrong

solution

1. I encountered it when dealing with the return value of the interface. Simply put, I need to process a certain value returned by the interface, as shown below:

   viewResults(row.id).then(response => {
         
         
      console.log(response)
      for (var i = 1; i < response.data.list.length; i++) {
         
         
        if (response.data.list[i - 1].score[3] == response.data.list[i - 1].score[4]) {
         
         
          this.gridData[i].name = response.data.list[i - 1].name
          this.gridData[i].catename = response.data.list[i - 1].catename
          this.gridData[i].score = response.data.list[i - 1].score.substring(0, 6)
        } else {
         
         
          this.gridData[i].name = response.data.list[i - 1].name
          this.gridData[i].catename = response.data.list[i - 1].catename
          this.gridData[i].score = response.data.list[i - 1].score.substring(0, 5)
        }
      }
    })
   

2. The reason for the specific id error is this. When vue adds objects to the object array, the for loop is only executed once (I added an object in the data, so it was executed only once). This is actually a problem caused by assignment, so it is written above is wrong, the correct way of writing is as follows:

   viewResults(row.id).then(response => {
         
         
      for(var i = 1;i<response.data.list.length;i++){
         
         
        let obj ={
         
         };
        if(response.data.list[i-1].score[3] == response.data.list[i-1].score[4]){
         
         
          obj.name = response.data.list[i-1].name
          obj.catename = response.data.list[i-1].catename
          obj.score = response.data.list[i-1].score.substring(0,6)
          }else{
         
         
            obj.name = response.data.list[i-1].name
            obj.catename = response.data.list[i-1].catename
            obj.score = response.data.list[i-1].score.substring(0,5)
          }
          this.gridData.push(obj)
      }
    })
   

PS: The push() method can add one or more elements to the end of the array and return the new length. New elements will be added at the end of the array. This method changes the length of the array.