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获取密钥

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

从Object获取值

 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解决了这个问题