"TypeError": 无法读取 Vuejs 中未定义的属性？

Question

它是这样工作的：我有一个用 Vue 制作的 table，其中有一些 select 选项。当我有一个 grupo（组）并且该组与 maquina（机器）没有关联时会出现此错误，这是不应该发生的，objective 是只出现“-”。在控制台中抛出错误并且未显示在我的 DataTable 中。

错误：[/Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'id_area')

我认为这是导致此错误的代码部分：

computed: {
    linhas () {
        return this.lista.map(row => {
            const group = this.grupos.find(g => g.id === row.id_grupo);
            const machine = this.maquinas.find(m => m.id === group.id_maquina);
            const area = this.areas.find(a => a.id === machine.id_area);

            return ({
                href: {path: this.editRoute + row.id},
                cols: [
                    row.id,
                    row.tag,
                    row.descricao,
                    row.tipo === "ANALOGICA" ? "Analógica" : "Digital",
                    group.nome,
                    (machine || { nome: "-" }).nome,
                    (area || { nome: "-" }).nome
                ]
            });
        });
    }
},

有人可以帮助我吗？我不明白为什么会这样。

Answer 1

array.find() 方法 returns undefined 如果未找到值 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)。

因此，如果没有从上一行检索到 ID 为 group.id_maquina 的“machina”，则行 const machine = this.maquinas.find(m => m.id === group.id_maquina); 将值 undefined 设置为 machine 常量。

这是你的错误：从未定义的 machine 读取 id_area。

所以你必须检查你的变量在array.find()

之后是否未定义

//...
  const group = this.grupos.find(g => g.id === row.id_grupo);
  if (group) {
    const machine = this.maquinas.find(m => m.id === group.id_maquina);
    if (machine) {
      const area = this.areas.find(a => a.id === machine.id_area);
    }
  }
//...

"TypeError": 无法读取 Vuejs 中未定义的属性？

"TypeError": Cannot read properties of undefined in Vuejs?

javascript

datatable

node.js

vue.js

vuejs2