Mengapa dalam Vue, apabila tatasusunan dimulakan dan output dipaparkan, saya mendapat ralat "Tidak boleh membaca harta yang tidak ditentukan"?

Question

我有两个vue文件，App.vue和一个组件UsersPage.vue。

UsersPage.vue:

<script>
eksport lalai {
    data:() =>({
        Senarai pengguna : []
    }),
    kaedah:{
        async createUsersList(){
            this.usersList = await fetch("https://jsonplaceholder.typicode.com/users").then((response)=> response.json());
        }
    },
    dicipta(){
        this.createUsersList();
    }
}
</skrip>

<template>
    <ul>
    <li v-for="pengguna dalam senarai pengguna" :key="user.id"><b>姓名:</b>{{user.name}}, <b>用户名:</b> {{user.username}},<b>邮编:</b> {{user.address.street}} </li>
    </ul>
</template>

和App.vue:

<script>
import UsersPage daripada "./components/UsersPage.vue"

eksport lalai {
  komponen: {
    Halaman Pengguna,
  },
  data: () => ({
    Halaman semasa: "首页",
  }),
  kaedah: {
    showHomePage() {
      this.currentPage = "首页";
    },
    showLoginPage() {
      this.currentPage = "登录";
    },
  },
};
</skrip>

<template>
  <kelas pengepala="pengepala">
    <span class="logo">
      <img src="@/assets/vue-heart.png" lebar="30" />C'est La Vue
    </span>
    <nav class="nav">
      <a href="#" @click.prevent="showHomePage">首页</a>
      <a href="#" @click.prevent="showLoginPage">登录</a>
    </nav>
  </header>

  <Halaman Pengguna/>
</template>

当我运行这个程序时，没有错误，并且输出仍然显示。Walau bagaimanapun, apabila saya menukar usersList kepada mana-mana tatasusunan dengan sebarang bilangan elemen (cth. userslist:[1,2]), data masih dipaparkan dalam format yang betul, tetapi dalam konsol penyemak imbas The ralat berikut berlaku:

Uncaught TypeError: Tidak dapat membaca sifat yang tidak ditentukan (membaca 'jalan')
    di UsersPage.vue:19:149
    di renderList (runtime-core.esm-bundler.js:2894:22)
    di Proxy._sfc_render (UsersPage.vue:19:163)
    di renderComponentRoot (runtime-core.esm-bundler.js:902:44)
    di ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
    di ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at instance.update (runtime-core.esm-bundler.js:5729:56)
    di setupRenderEffect (runtime-core.esm-bundler.js:5743:9)
    di mountComponent (runtime-core.esm-bundler.js:5525:9)
    di processComponent (runtime-core.esm-bundler.js:5483:17)

Mengapa saya mendapat ralat ini, walaupun data dipaparkan dengan betul dan alamatnya wujud dalam https://jsonplaceholder.typicode.com/users?

Answer 1

Dalam v-for中，你使用了users.address.street anda.

Bila anda akan [1, 2]传递给usersList并且Vue通过v-for解析这些项时，它尝试读取每个数字的address.street.

Oleh kerana ia adalah nombor, anda akan mendapat ralat yang anda hadapi apabila address是undefined。当你尝试访问undefinedmenggunakan sebarang sifat padanya.

NOTA : Jika anda inginkan v-for能够解析没有address的项而不抛出错误，你可以将users.address.street替换为users.address?.street anda.
Dokumentasi: pengendali penggabungan batal.

---

Selain itu, anda tidak sepatutnya menamakan iterator anda users，因为这可能会让你或其他需要修改该代码的开发人员对users是什么感到困惑。你应该将其命名为user（例如：v-for="user in usersList" :key="user.id").
Tetapi itu tidak mengubah hakikat bahawa apabila ia adalah nombor, anda tidak boleh mengakses harta address.streetnya.