Bagaimana untuk menyelesaikan "TypeError: Tidak dapat membaca sifat 'xxx' null" dalam aplikasi Vue?

Dalam aplikasi Vue, pembangun sering menghadapi TypeError: Tidak dapat membaca sifat 'xxx' ralat nol, di mana "xxx" boleh digantikan dengan mana-mana pembolehubah, sifat atau nama kaedah Ralat ini biasanya berlaku apabila mengakses nilai nol atau pembolehubah tidak ditentukan , harta, atau kaedah. Dalam artikel ini kami akan membincangkan punca ralat ini secara terperinci dan menyediakan tiga penyelesaian yang mungkin untuk rujukan anda.

Punca ralat ini:

1 Mengakses pembolehubah, sifat atau kaedah yang tidak ditentukan

Apabila kami menggunakan rangka kerja Vue untuk membangunkan aplikasi, kami kadangkala menentukan beberapa pembolehubah, sifat atau kaedah dalam model data dan menggunakannya dalam akses kod. dalam. Walau bagaimanapun, jika kita tidak mentakrifkan pembolehubah, sifat atau kaedah ini sebelum mengaksesnya, atau jika ia ditakrifkan tetapi dieja dengan salah, ralat ini akan berlaku.

Sebagai contoh, dalam kod berikut, pembolehubah "nama" belum ditakrifkan, jadi mengakses "nama" akan melaporkan Ralat Jenis: Tidak dapat membaca 'nama' sifat ralat:

<template>
  <div>{{name}}</div>
</template>

<script>
export default{
  data(){
    return {
      age: 18,
      gender: 'male',
    }
  }
}
</script>

2 Apabila memuatkan data secara tidak segerak, memuatkan data dahulu tidak dipertimbangkan

Sebab lain ialah apabila memaparkan data secara tidak segerak, jika data dimuatkan dahulu, ralat ini akan berlaku. Seperti yang ditunjukkan di bawah:

<template>
  <div>{{user.name}}</div>
</template>

<script>
export default{
  data(){
    return {
      user: null,
    }
  },
  created(){
    this.fetchData();
  },
  methods: {
    fetchData(){
      this.$http.get('/user').then(response => {
        this.user = response.data;
      });
    }
  }
}
</script>

Apabila kami memuatkan data secara tidak segerak, kami mesti memastikan untuk memberikan nilai kepada pembolehubah "pengguna" terlebih dahulu, jika tidak, mengakses "user.name" akan melaporkan TypeError: Tidak dapat membaca 'nama' sifat ralat nol .

3. Prop tidak diluluskan semasa menyusun komponen

Dalam aplikasi Vue, kami sering menggunakan sarang komponen untuk menyusun kod. Apabila pembolehubah atau sifat ditakrifkan dalam komponen induk dan diserahkan kepada komponen anak, jika pembolehubah atau sifat tidak diluluskan, komponen anak akan mengakses nilai nol dan ralat ini akan berlaku. Sebagai contoh, dalam kod berikut, komponen anak "komponen kanak-kanak" tidak mempunyai atribut "mesej":

<!-- Parent Component -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default{
  components: {
    ChildComponent,
  },
  data(){
    return {
      message: 'Hello World!',
    }
  }
}
</script>

<!-- Child Component -->
<template>
  <div>{{message}}</div>
</template>

<script>
export default{
  props: [],
  data(){
    return {
      name: 'Alice',
    }
  }
}
</script>

Dalam contoh di atas, apabila komponen induk dimuatkan, pembolehubah "mesej" yang ditakrifkan oleh komponen anak adalah batal kerana komponen anak tidak mentakrifkan "props" ", jadi harta yang dihantar kepadanya tidak boleh diterima, mengakibatkan TypeError: Tidak dapat membaca 'mesej' sifat ralat nol apabila mengakses "mesej".

Penyelesaian:

1 Sebelum mengakses pembolehubah, sifat atau kaedah, pastikan ia ditakrifkan dan dieja dengan betul

Kami boleh mentakrifkan pembolehubah, sifat atau kaedah dalam model data atau kaedah komponen Vue dan pastikan ini diakses. dalam pembolehubah kod, sifat atau kaedah sebelum ia ditakrifkan dan dieja dengan betul. Seperti yang ditunjukkan di bawah:

<template>
  <div>{{name}}</div>
</template>

<script>
export default{
  data(){
    return {
      name: 'Alice',
      age: 18,
      gender: 'female',
    }
  }
}
</script>

2 Sebelum memaparkan data, pastikan data telah dimuatkan

Apabila kami menggunakan pemuatan data tak segerak, kami perlu memastikan bahawa data dimuatkan sebelum anda boleh menggunakan kaedah asynchronous cangkuk yang dicipta atau dipasang, Seperti yang ditunjukkan di bawah:

<template>
  <div>{{user.name}}</div>
</template>

<script>
export default{
  data(){
    return {
      user: null,
    }
  },
  created(){
    this.fetchData();
  },
  methods: {
    async fetchData(){
      const response = await this.$http.get('/user');
      this.user = response.data;
    }
  }
}
</script>

Apabila memuatkan data secara tak segerak, kita boleh menggunakan kaedah tak segerak dalam cangkuk yang dicipta atau dipasang untuk memastikan data dimuatkan sebelum dipaparkan. Dalam kod di atas, kami menggunakan async dan menunggu untuk merangkum kaedah $http.get() untuk memastikan ia tidak akan dipaparkan sebelum data dimuatkan.

3 Apabila menghantar atribut, pastikan komponen anak telah menentukan atribut

Apabila menentukan atribut dalam komponen induk dan menghantarnya kepada komponen anak, anda perlu memastikan bahawa komponen anak telah menentukan atribut Anda boleh menggunakan prop untuk mentakrifkan komponen anak, seperti yang ditunjukkan di bawah:

<!-- Parent Component -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default{
  components: {
    ChildComponent,
  },
  data(){
    return {
      message: 'Hello World!',
    }
  }
}
</script>

<!-- Child Component -->
<template>
  <div>{{message}}</div>
</template>

<script>
export default{
  props: {
    message: {
      type: String,
      required: true,
    }
  },
  data(){
    return {
      name: 'Alice',
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan prop untuk menentukan sifat "mesej" subkomponen Apabila komponen induk melepasi sifat ini, ia mesti memastikan bahawa harta telah ditakrifkan, jika tidak TypeError akan berlaku : Tidak dapat membaca sifat 'xxx' ralat nol.

Ringkasan:

Dalam aplikasi Vue, kami menggunakan pembolehubah, sifat dan kaedah untuk memproses data dan logik perniagaan. Semasa menulis kod, anda perlu memberi perhatian sama ada pembolehubah, sifat atau kaedah ini telah ditakrifkan semasa mengaksesnya dan sama ada ia dieja dengan betul. Apabila kami menggunakan pemuatan tak segerak bagi data atau sarang komponen, kami mesti memastikan data dimuatkan sebelum memaparkan data dan apabila menghantar sifat, kami mesti memastikan komponen anak telah menentukan sifat tersebut. Jika kami masih menemui TypeError: Tidak dapat membaca sifat 'xxx' ralat nol, kami boleh menggunakan konsol penyemak imbas untuk nyahpepijat, mencari sumber ralat dan kemudian mengendalikannya mengikut penyelesaian di atas.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan "TypeError: Tidak dapat membaca sifat 'xxx' null" dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!