ReactJS：[this.props]与[道具]不可能完全不同

Question

在componentDidMount内部的连续代码段中：

#one {
  background: red;
}
#one:active {
  background: #00ff00;
}
.active {
  background: #00ff00 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="startBtn">start</button> <button id="one">one</button>应该有this.props.account。

全部

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

this是一个带字段的对象。

然而，在所有

中

console.log(this);

this.props.account是console.log(this.props); 。 （this.props.account的{​​{1}}字段为null）

我已将此部分放在我的计划的不同部分，我尝试在account和this.props之间添加耗时的流程，但情况仍然如此。

导致这种情况的原因是什么？谢谢。

Answer 1

regex = /^[a-zA-Z0-9.]{1,64}@[a-zA-Z0-9.]{1,64}$/ ^ ^^ 不一定会显示对象在记录时的结构，而是显示单击三角形以检查对象时的结构。与此同时（在控制台中记录和检查之间）组件可能已经被新道具重新渲染。有关基本相同的问题，请参阅Can't iterate over my array/object. Javascript, React Native。

以下是演示此问题的示例（打开浏览器控制台）：

console.log

请注意，即使第二个日志显示var obj = {props: {account: null}}; console.log(obj); console.log(obj.props); obj.props = {account: 'not null' }; ：

，它也会显示account: "not null"

我打赌如果你推迟评估account: null，例如通过

console.log(this.props)

你会看到你想要的价值。

这只是对你所看到的一个解释。您希望如何解决可能取决于您的应用程序的其余部分。您当然无法访问 mount 上的setTimeout(() => console.log(this.props), 2000) ，但您可以在后续渲染中执行此操作。请记住，this.props.account仅在第一次呈现/装载组件时调用，而不是在后续呈现时调用。看看其他生命周期方法。