javascript - 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 不一定会显示对象在记录时所具有的结构，但会显示当您单击三 Angular 形来检查它时它所具有的结构。与此同时(在控制台中进行日志记录和检查之间)组件可能已使用新的 props 重新渲染。请参阅Can't iterate over my array/object. Javascript, React Native对于基本相同的问题。

以下是演示该问题的示例(打开浏览器控制台):

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) 的评估，例如通过

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

您会看到您想要的值。

<小时/>

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