[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'categoryName'”

Question

<div v-if="text" class="click-event" @click="select(record)">
  {{
     ((groupData.filter(group => (group.id === parseInt(text, 0))))[0].categoryName)||'No Group'
  }}
</div>

我有这行代码，在ant design vue表中显示categoryName。

但它会在控制台中返回此错误：

Vue warn]: Error in render: "TypeError: Cannot read property 'categoryName' of undefined"

但是它仍然在表中显示我想要的正确数据。 是的，我知道一旦捕获到api即可更改数据，就可以在javascript函数中进行循环。但是Get API中已经包含许多变量。如果我想循环，将花费很多代码。

我该如何克服这个错误？但仍然显示categoryName？

Answer 1

    Picker(selection: self.$stuff, label: Text("some stuff:")) {
        ForEach(0 ..< self.getStuff().count) {
            Text(self.getStuff()[$0])
        }
    }
    .scaledToFit()
//  .frame(width: 160) // < alternate approach - give explicit desired width

根据您的表情，我可以强调几个问题：

1. parseInt中的第二个参数是基数，必须在2到36之间，在您的代码中它是0，这是不正确的。我认为它必须是10，因为我认为id存储在十进制数字系统中。
2. 如果groupData中的任何项目都不匹配，在这种情况下，您将得到空数组，在这种情况下，数组中的第一项是((groupData.filter(group => (group.id === parseInt(text, 0))))[0].categoryName)||'No Group' ，这就是为什么会出现此问题。
3. 我建议您使用find代替过滤器，它具有相同的语法，但是它会返回第一个匹配的结果，或者如果没有匹配项，则返回undefined。

类似这样的东西：

undefined

1. 不要在模板部分中编写这样的逻辑，它并不总是很明显并且很难调试。

希望对您有帮助。