Rumah > hujung hadapan web > View.js > Bagaimana untuk menyelesaikan 'TypeError: Tidak dapat membaca sifat 'xxx' null' dalam aplikasi Vue?

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

WBOY
Lepaskan: 2023-08-18 17:25:03
asal
6383 orang telah melayarinya

在Vue应用中遇到“TypeError: Cannot read property 'xxx' of null”怎么解决?

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan