为什么在Vue中，当数组初始化并显示输出时，会出现“无法读取未定义的属性”的错误？-PHP中文网问答

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

UsersPage.vue:

<script>
export default {
    data:() =>({
        usersList : []
    }),
    methods:{
        async createUsersList(){
            this.usersList = await fetch("https://jsonplaceholder.typicode.com/users").then((response)=> response.json());
        }
    },
    created(){
        this.createUsersList();
    }
}
</script>

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

和App.vue:

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

export default {
  components: {
    UsersPage,
  },
  data: () => ({
    currentPage: "首页",
  }),
  methods: {
    showHomePage() {
      this.currentPage = "首页";
    },
    showLoginPage() {
      this.currentPage = "登录";
    },
  },
};
</script>

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

  <UsersPage/>
</template>

当我运行这个程序时，没有错误，并且输出仍然显示。然而，当我将usersList更改为任何具有任意数量元素的数组（例如usersList:[1,2]），数据仍然以正确的格式显示，但在浏览器的控制台中会出现以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'street')
    at UsersPage.vue:19:149
    at renderList (runtime-core.esm-bundler.js:2894:22)
    at Proxy._sfc_render (UsersPage.vue:19:163)
    at renderComponentRoot (runtime-core.esm-bundler.js:902:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at instance.update (runtime-core.esm-bundler.js:5729:56)
    at setupRenderEffect (runtime-core.esm-bundler.js:5743:9)
    at mountComponent (runtime-core.esm-bundler.js:5525:9)
    at processComponent (runtime-core.esm-bundler.js:5483:17)

为什么会出现这个错误，即使数据正确地呈现并且地址也存在于https://jsonplaceholder.typicode.com/users中？

全部回复(1)

P粉0870748972023-08-29 13:17:32 1楼

在你的v-for中，你使用了users.address.street。

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

因为它们是数字，它们的address是undefined。当你尝试访问undefined的任何属性时，你会得到你正在遇到的错误。

注意：如果你希望你的v-for能够解析没有address的项而不抛出错误，你可以将users.address.street替换为users.address?.street。
文档： nullish coalescing operator。

另外，你不应该将你的迭代器命名为users，因为这可能会让你或其他需要修改该代码的开发人员对users是什么感到困惑。你应该将其命名为user（例如：v-for="user in usersList" :key="user.id"）。
但这并不改变当它是一个数字时，你无法访问它的address.street属性的事实。

赞 +0

添加回复