React props对象数据未定义

Question

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

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

在SomeComponent中，当我console.log this.props.myData时，不是未定义，并且按预期包含key/val对。

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

但是，当我尝试访问该对象的任何一个属性时，它们都是undefined。

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"
  });
  …
}

Answer 1

您可能在这里看到的是Chrome开发人员工具的工作原理。当您console.log一个对象，并且该对象更新/更改时，开发人员工具中的输出也会自动更新以显示新的对象状态。我不确定为什么会这样。

因此，当您做第一个示例时，myData实际上是一个空对象（由于应用程序的其他部分），但是稍后确实会填充它，这会导致您的组件更新和更新Chrome开发者工具。

尝试像这样运行控制台日志：

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

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

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

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

Answer 2

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

从对象获取密钥

 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]); });

Answer 3

正如@Dr_Derp建议（并证明）的那样，它可能是浏览器的“智能功能”-浏览器通过“更正”记录的对象值来欺骗您。

出于某种原因，props.myData在运行构造函数时没有期望值（并在此之后获得它）-以此方式证明带有静态对象作为道具的测试组件：

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

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

stackblitz

这种方式不是<SomeComponent/>的错，而是他的父母，即获取数据并将数据传递给孩子的方式。

Answer 4

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

使用您的示例，我通过访问this.props.myDatap[title]而不是this.props.myData.title

解决了该问题