数据库中的对象中的Vue.js数组未定义,即使值出现在控制台中

nwlqm0z1  于 2023-01-21  发布在  Vue.js
关注(0)|答案(1)|浏览(171)

我尝试从db中获取数据并显示在屏幕上。我使用axios获取数据,并成功获得响应。因此,我使用forEach获取数据中的数组。

mounted(){
    axios.get('/api/tree').then(Response => {
                var datas =Response.data.trees

                datas.forEach(function(data){
                    var tree = data.tree
                    console.log(tree)
                    console.log(tree.nodes)
                })
    })

}

数据如下。

{
    'id' : "aeENkvQdx",
    'tree': {  
         'nodes' : [{ 'node_id': 0, 'text': 'test'}, .....],
         'edges' : [{ 'node_id': 0, 'text': 'test'}, .....]
     }

}

所以,当我打印console.log(tree)时,它工作正常。它显示{ 'nodes' : [...,..,], 'edges: [...,...,...]}。但是,当我打印console.log(tree.nodes)console.log(tree.edges)时,它显示错误TypeError: Cannot read properties of undefined (reading 'nodes')或“edges”,即使它打印控制台中的节点或边数组的值。我不知道为什么只有当我尝试访问节点或边时才会出错,以及如何解决这个问题...

iezvtpos

iezvtpos1#

发生这种情况是因为在某些data对象中,tree属性丢失。因此,当您尝试访问nodesedges对象时,它会给您以下错误。
TypeError:无法读取未定义(读取"节点")的属性TypeError:无法读取未定义的属性(正在读取"edges")
您可以使用Optional Chaining (?.)运算符解决此问题。

console.log(tree?.nodes)
console.log(tree?.edges)

现场演示**:**

const datas = [{
  'id' : "aeENkvQdx",
  'tree': {  
    'nodes' : [{ 'node_id': 0, 'text': 'test'}],
    'edges' : [{ 'node_id': 0, 'text': 'test'}]
  }

}, {
  'id' : "aeENkdYJh"
}];

datas.forEach(function(data) {
  var tree = data.tree;
  console.log(tree);
  console.log(tree?.nodes);
});

相关问题