获取数据后无法读取未定义的属性？答案

【问题标题】：Cannot read property of undefined after fetching data?获取数据后无法读取未定义的属性？
【发布时间】：2021-06-26 17:45:50
【问题描述】：

p {{ points.returnPoints }}

在我的 html 中返回

[ { "description": null, "id": "ade5e33e-658f-4a9d-84f9-590357600054", "name": "Starting Point", "position": { "lat": -0.00027894973753803614, "lon": -0.01857362687587738 }, "radius": 100, "sort": 0 } ]

但是，每当我在我的按钮上做 v-if="points.returnPoints[0].name != Starting Point`"

I am getting this error Uncaught (in promise) TypeError: Cannot read property 'name' of undefined

为什么会出现此错误？我必须根据第一个数组元素的名称隐藏我的项目的可见性，但由于这个错误，我无法做到这一点。我该如何解决这个问题？

在我的组件中，我正在为 pointList 数组调用 GET 请求。

我的吸气剂：

  getters: {
    returnPoints(state) {
      let sortState = [...state.pointList.collection]
      return sortState.sort((a,b) => a.sort - b.sort)
    },
  }

【问题讨论】：

returnPoints 在某些时候是未定义的。不是之后获取数据，但很可能是之前。
请提供更多上下文，例如整个组件模板，因为我们无法提供帮助：/ 很确定 points.returnPoints 在您调用它时是一个空数组。话虽如此，您应该更安全地访问您的数据（断言数组不为空等）
@Kapcash 但我正在调用该函数以获取 onBeforeMount 上的数据.. 它为什么仍然未定义？
元素显示在 html 中，但当我像 [0].name 或 .id 那样深入时不会显示
那肯定是因为你的 fetch 函数是异步的。 Vue 组件挂钩是同步的，因此它实际上并不等待您的调用来挂载组件。这就是为什么它必须是“null”安全的：你的初始状态是空的，然后它会被填充。

标签： vue.js vuejs2 vuejs3

【解决方案1】：

获取数据后无法读取未定义的属性？

实际上，它发生在获取数据之前，因为在渲染组件时数据不存在：points.returnPoints[0] 未定义，尝试访问 name 属性会导致错误。

试试这个：

<div v-if="points.returnPoints.length && points.returnPoints[0].name !== 'Starting Point'"> ... </div>

上面的代码假定points.returnPoints 是一个数组。如果为空，则不会检查第二个条件，也不会导致错误。

【讨论】：

这消除了未定义的错误，但不显示按钮，看起来 .name 加载速度不够快
仅当name 不等于Starting Point 并且您的数组中只有一个点具有此确切名称时才会呈现。所以，而不是!== 做===。
如果它不等于Starting Point，我不能渲染它，我有你的确切代码，它根本不会渲染其他项目。
您的初始状态/数据是否初始化为空值？如果未定义，Vue 不会对任何更改做出反应，即使数组更新，Vue 也不会更新组件。这只是一个线索，也许不是答案