Debugging ReactJs in Chrome on page load - this and everything else is undefined when using console

Question

I have a problem when debugging React on initial page load. As you can see from the screenshot, if I hover over this I can see the content but if I use console it says that this is undefined. This only happens when I reload the page, if I debug when clicking around this problem does not occur. I have React Developer Tools for Chrome installed and noted that when this is happening it only says Connecting to React… . Could this be the problem?

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

I'm using .tsx files ( .jsx but with TypeScript) if that could matter.

Sources tab:

React tab:

Answer 1

根据您更新的注释，如果从构造函数启动函数然后使用断点停止它，构造函数将无法完成执行，这意味着它将无法正确设置原型链，最重要的是，设置正确的引用到this 。