Javascript React道具对象数据未定义

我将对象作为道具传递给组件

<SomeComponent myData={props.myData}>...</SomeComponent>

但是，当我尝试访问此对象的任何一个属性时，它们都是未定义的

constructor(props) {
  super(props);
  console.log(this.props.myData.title); // undefined
  …
}

更新

下面确实输出了该值，但我不清楚为什么，因为该对象在没有

setTimeout

的情况下已经可用

constructor(props) {
  super(props);
  setTimeout(() => {
    console.log(this.props.fightData.title); // "Work plain near killed us both"
  });
  …
}

---

你在这里看到的很可能是Chrome开发工具的工作原理。当您记录一个对象，并且该对象更新/更改时，开发人员工具中的输出也将自动更新以显示新的对象状态。我不完全清楚为什么会这样

因此，当您执行第一个示例时，myData实际上是一个空对象（由于应用程序的某些其他部分），但它稍后会被填充，这会导致您的组件更新Chrome developer工具

尝试如下方式运行控制台日志：

console.log(JSON.stringify(this.props.myData));

看看它输出了什么。这将创建并打印一个字符串，因此当对象更改时，它不会在开发人员工具中更新

当控制台在空对象上记录this.props.myData.someVar时，它会将未定义的打印到控制台，而控制台不会附加到任何现有对象。因此，即使在组件上更新对象，它也不会像第一个示例那样在控制台中更新

---

这可能仅适用于基于类的组件，因为基于函数的组件在每次重新渲染时都会重新创建，但基于类的组件只是更新其props对象。

您可以尝试以下方法从对象读取键和值

从对象获取关键帧

 Object.keys(this.props.myData).forEach((key) => { console.log(key + ': ' + this.props.myData[key]); });

 Object.values(this.props.myData).forEach((value) => { console.log(value + ': ' + this.props.myData[value]); });

从对象获取值

 Object.keys(this.props.myData).forEach((key) => { console.log(key + ': ' + this.props.myData[key]); });

 Object.values(this.props.myData).forEach((value) => { console.log(value + ': ' + this.props.myData[value]); });

正如@Dr_Derp所建议（并证明）的，这可能是一种浏览器“智能功能”——浏览器通过“纠正”记录的对象值欺骗了你

出于某种原因，

props.myData

在运行构造函数时没有预期的值（并在之后得到它）-以这种方式证明使用静态对象作为prop的测试组件：

<SomeComponent myData={{title:'test'}}>...</SomeComponent>

constructor(props) {
  super(props);
  console.log(this.props.myData.title); //     should be 'test'
  …
}

。。。
建造师（道具）{
超级（道具）；
console.log（this.props.myData.title）；//应该是“test”
…
}

---

这样一来，这不是他的错，而是他的父母的错，即获取数据并将数据传递给孩子的方式。

我遇到了与您完全相同的问题

---

使用您的示例，我通过访问

this.props.myDatap[title]

而不是

this.props.myData.title

解决了这个问题，所以您说

console.log（this.props.myData）

正在打印对象和

console.log（this.props.myData.title）如果在同一个构造函数中打印它们，

是未定义的？@MatthewBarbara是的。

myData

的类型是什么？它是从mongodb查询返回的吗？Object.keys（this.props.myData）.forEach（（key）=>{console.log（key+'：'+this.props.myData[key]）；}）；您可以使用Object.values作为值我仍然得到

未定义的

。您是从这个.props.myData中得到未定义的吗？我希望您从标量中得到未定义，因为这不会更新。尝试在componentDidUpdate函数中放入日志，看看是否调用了该函数