直接访问时，对象中的数组返回为未定义答案

【问题标题】：Array in object comes back as undefined when accesing directly直接访问时，对象中的数组返回为未定义
【发布时间】：2020-09-13 10:14:01
【问题描述】：

这是一个 React 组件，它被赋予了一个对象数组（main_object），其中一个元素是另一个对象数组（secondary_object）。在 console.log 中打印主对象时，数组是可见的，但是当尝试打印辅助对象数组时，它返回 undefined 但是如果我访问主对象的另一个变量，它会返回它。

代码：

render(){
   const fleets = this.props.fleets;
   console.log(fleets[1]);//works
   console.log(fleets[1].name);//works
   console.log(fleets[1].ships);//undefined
}

输出： Console Output

编辑：使用我的实际代码而不是示例代码

【问题讨论】：

如你所见，元素上没有secondary_objects属性，这就是它未定义的原因。
当您展开 console 以向您显示对象在 console.log 时的状态时，不要相信它。它异步检索该信息。所以可能发生的事情是：ships 属性是在您执行 console.log 之后添加的。

标签： javascript arrays reactjs

【解决方案1】：

很难重新创建您的环境。在这里，我通过引用全局 window 对象来模仿 this。而且，如您所见，它的工作方式是将 .ships 属性列为它实际的数组。

window.props={fleets:[
  {},
  {f_faction:1,
   id:1,
   members:["one"], 
   name:"Capital Fleet",
   owners:["owner1"],
   ships:[{a:1,b:2},{a:5,b:4},{a:7,b:8}],
   x:789, y:2897, z:-23}
]};

function render(){
   const fleets = this.props.fleets;
   console.log(JSON.stringify(fleets[1]));//works
   console.log(JSON.stringify(fleets[1].name));//works
   console.log(JSON.stringify(fleets[1].ships));//lists array!
}

render()

@trincot 关于对象的console.log 输出是异步的建议在这里可能非常相关。因此，如果您想在特定时间获取对象的内容，则应该对其进行“快照”。一种方法是通过JSON.stringify()。

【讨论】：

【解决方案2】：

试试这个

 render(){
   const fleets = this.props.fleets;
   console.log(JSON.stringify(fleets[1]));
   console.log(JSON.stringify(fleets[1].name));
   console.log(JSON.stringify(fleets[1].ships));
}

【讨论】：

【解决方案3】：

通过使用JSON.stringify，我能够看到问题出在数组的异步创建上。

我修复了所有异步代码，现在它工作正常。

【讨论】：