Pourquoi dans Vue, lorsque le tableau est initialisé et que la sortie est affichée, j'obtiens l'erreur « Impossible de lire la propriété non définie » ?
P粉642919823
2023-08-28 23:38:03
<p>
<p>UsersPage.vue :</p>
<pre class="brush:php;toolbar:false;"><script>
exporter par défaut {
données :() =>({
Liste des utilisateurs : []
}),
méthodes :{
asynchrone createUsersList(){
this.usersList = wait fetch("https://jsonplaceholder.typicode.com/users").then((response)=> réponse.json());
}
},
créé(){
this.createUsersList();
}
}
</script>
<modèle>
<ul>
<li v-for="utilisateur dans la liste des utilisateurs" :key="user.id"><b>姓名:</b>{{user.name}}, <b>用户名:</b> {{user.username}},<b>邮编 :</b> {{user.address.street}} </li>
</ul>
</template></pre>
<p>和App.vue :</p>
<pre class="brush:php;toolbar:false;"><script>
importer UsersPage depuis "./components/UsersPage.vue"
exporter par défaut {
Composants: {
Page Utilisateurs,
},
données : () => ({
currentPage : "首页",
}),
méthodes : {
showHomePage() {
this.currentPage = "首页";
},
showLoginPage() {
this.currentPage = "登录";
},
},
} ;
</script>
<modèle>
<header class="en-tête">
<span class="logo">
<img src="@/assets/vue-heart.png" largeur = "30" />C'est La Vue
</envergure>
<nav class="nav">
<a href="#" @click.prevent="showHomePage">首页</a>
<a href="#" @click.prevent="showLoginPage">登录</a>
</nav>
</en-tête>
<PageUtilisateurs/>
</template></pre>
<p>Cependant, lorsque je remplace usersList par n'importe quel tableau contenant un nombre quelconque d'éléments (par exemple <code>usersList:[1,2]</code>), les données sont toujours affichées dans le format correct, mais dans la console du navigateur. l'erreur suivante se produit : </p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError : impossible de lire les propriétés d'undefined (lecture de 'street')
sur UsersPage.vue : 19:149
sur renderList (runtime-core.esm-bundler.js:2894:22)
à Proxy._sfc_render (UsersPage.vue:19:163)
à renderComponentRoot (runtime-core.esm-bundler.js:902:44)
sur ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
sur ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
à instance.update (runtime-core.esm-bundler.js:5729:56)
à setupRenderEffect (runtime-core.esm-bundler.js:5743:9)
sur mountComponent (runtime-core.esm-bundler.js:5525:9)
à processComponent (runtime-core.esm-bundler.js:5483:17)</pre>
<p>Pourquoi est-ce que j'obtiens cette erreur, même si les données sont correctement restituées et que l'adresse existe dans https://jsonplaceholder.typicode.com/users ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dans votre
v-for中，你使用了users.address.street.Quand tu le feras
[1, 2]传递给usersList并且Vue通过v-for解析这些项时，它尝试读取每个数字的address.street.Parce qu'il s'agit de nombres, vous obtiendrez l'erreur que vous rencontrez lorsque
address是undefined。当你尝试访问undefinedutiliserez des propriétés dessus.NOTE : Si vous souhaitez votre
v-for能够解析没有address的项而不抛出错误，你可以将users.address.street替换为users.address?.street.Documentation : opérateur de coalescence nul.
De plus, vous ne devriez pas nommer vos itérateurs
users，因为这可能会让你或其他需要修改该代码的开发人员对users是什么感到困惑。你应该将其命名为user（例如：v-for="user in usersList" :key="user.id").Mais cela ne change rien au fait que lorsqu'il s'agit d'un numéro, vous ne pouvez pas accéder à sa propriété
address.street.