ReactJS: [this.props] unmögliche verschieden ist zu [Stützen in dieser]

Question

In einem kontinuierlichen Abschnitt von Code innerhalb componentDidMount genannt:

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

this soll this.props.account werden zu müssen.

in allen

console.log(this); 

this.props.account ist ein Objekt mit Feldern.

jedoch in allen

console.log(this.props); 

this.props.account ist null. (Das account Feld this.props ist null)

ich diesen Abschnitt platziert habe in verschiedenen Teilen meines Programms, und ich habe versucht, eine Zeit zwischen Zugabe console.log(this) und console.log(this.props) aufwendigen Prozess, aber das ist immer noch der Fall.

Was könnte das verursacht haben? Vielen Dank.

Answer 1

console.log zeigt nicht unbedingt die Struktur, die das Objekt zum Zeitpunkt der Protokollierung hat, sondern die Struktur, die es hat, als Sie auf das Dreieck geklickt haben, um es zu untersuchen. In der Zwischenzeit (zwischen Protokollierung und Inspektion in der Konsole) wurde die Komponente möglicherweise mit neuen Requisiten neu gerendert. Siehe Can't iterate over my array/object. Javascript, React Native für im Grunde das gleiche Problem. Hier

ist ein Beispiel, das das Problem veranschaulicht (öffnen Sie Ihren Browser-Konsole):

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

Beachten Sie, wie es zeigt account: "not null" obwohl das zweite Protokoll zeigt account: null:

Ich wette wenn Sie die Auswertung von console.log(this.props) verzögern, z über

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

würden Sie den gewünschten Wert sehen.

---

Dies war nur eine Erklärung für das, was Sie sehen. Wie Sie das lösen wollen, hängt wahrscheinlich vom Rest Ihrer Anwendung ab. Sie können sicherlich nicht auf this.props.account auf mount zugreifen, aber Sie können auf nachfolgende Rendern tun. Beachten Sie, dass componentDidMount nur aufgerufen wird, wenn die Komponente zum ersten Mal gerendert/bereitgestellt wird, nicht bei nachfolgenden Rendervorgängen. Sehen Sie sich die anderen Lebenszyklusmethoden an.