React对象数据未定义
我把一个对象作为道具传递给一个组件。
<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"
});
…
}回答 4
Stack Overflow用户
发布于 2018-09-08 23:21:08
你在这里看到的很可能是Chrome开发工具的工作方式。当您对一个对象进行console.log更新/更改时，开发人员工具中的输出也将自动更新以显示新的对象状态。我不太清楚为什么会这样。
所以，当您执行第一个示例时，myData实际上是一个空对象(由于应用程序的其他部分)，但它稍后会被填充，这会导致您的组件更新和更新Chrome工具。
试着像这样运行控制台日志：
console.log(JSON.stringify(this.props.myData));看看它输出了什么。这将创建并打印一个字符串，因此当对象更改时，它将不会在developer工具中更新。
当控制台日志this.props.myData.someVar在空对象上时，它会打印未定义的控制台，控制台没有附加到任何现有对象。因此，即使在组件上更新对象时，也不会像第一个示例那样在控制台中进行更新。
这很可能仅适用于基于类的组件，因为每次重新呈现时都会重新创建基于功能的组件，但基于类的组件只是更新其支持对象。
Stack Overflow用户
发布于 2018-09-16 18:38:34
我刚刚遇到了和你完全一样的问题。
使用您的示例，我通过访问this.props.myDatap[title]而不是this.props.myData.title解决了这个问题。
Stack Overflow用户
发布于 2018-09-09 00:35:57
您可以尝试以下从对象读取键和值的方法
从对象中获取密钥
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]); });https://stackoverflow.com/questions/52240093
复制相似问题
腾讯云开发者
