ReactJS：[this.props]不可能与[this中的props]不同

Question

在名为componentDidMount内部的连续代码中：

console.log('hv props');
for(var i = 0; i<20; i++){
    console.log(this);
    console.log(this.props);
}
console.log('hv props end');

this应该具有this.props.account。

在所有

console.log(this);

this.props.account是具有字段的对象。

但是，总的来说

console.log(this.props);

this.props.account为null 。 （ this.props的account字段为null ）

我将本节放在程序的不同部分中，并尝试在console.log(this)和console.log(this.props)之间添加一个耗时的过程，但情况仍然如此。

是什么原因造成的？ 谢谢。

Answer 1

console.log不一定会在您记录对象时向您显示该对象的结构，而是单击三角形进行检查时它具有的结构。 同时（在控制台中进行日志记录和检查之间），该组件可能已使用新的道具重新渲染。 请参阅无法遍历我的数组/对象。 Javascript，React Native的问题基本相同。

这是一个演示问题的示例（打开浏览器控制台）：

var obj = {props: {account: null}};
console.log(obj);
console.log(obj.props);
obj.props = {account: 'not null' };

请注意，即使第二条日志显示account: null它也如何显示account: "not null" ：

我敢打赌，如果您延迟对console.log(this.props)的评估，例如通过

setTimeout(() => console.log(this.props), 2000)

您会看到想要的值。

---

这只是对您所看到的内容的解释。 您想如何解决可能取决于您的应用程序的其余部分。 您当然不能在mount上访问this.props.account ，但可以在后续渲染中进行访问。 请记住，只有在第一次渲染/安装componentDidMount时才调用componentDidMount，而不是在后续渲染时调用。 看一下其他生命周期方法。