SPFX webpart not rendering data untill browser console is opened

Hi,

 

For a customer we have been asked to make a webpart that can list all the current subsites for the site that a user is on.

This was asked to be done using react "DetailList".

I am not super familiar with react and while testing my webpart, I noticed that the data did not get rendered or fetched unless I opened the browser console.

When I run the webpart a lot of 'requests' are done and my webpart renders the basics, but some requests only get done when I open my console. Only on the moment that I open my browser console, do all the subsites get rendered inside the DetailList.

 

I will include some of the code I wrote to show as to what we did, but is there someone that can verify what causes this behavior, or can tell me how to fetch the data properly to render inside the Detaillist webpart

 

first I pass my httpclient and siteurl to the TSX file by giving it in the react.createElement

screen 1

 

after that in the constructor of the TSX file, I put the code that will define the state of the component

(I know after doing more research that this is not hte best method to do it but I followed an example :)

 )

 

the code that is done in the renderlistasync method to give you an example of what happens inside the method ( it was a lot shorter but I experimented a lot to try and find a solution )

 

 

when I run my webpart, this is the output that I get when adding the webpart to my workbench on sharepoint

 

Notice the last request that was performed (highlighted in red)

 

now as you can see the in the following picture, the subsites of the current page are not shown inside the webpart 

 

Now when I open my browser console, there are 2 new requests that get done : 

 

 

and the webpart suddently gets all the subsites from the current site that the workbench is on.

 

now is there anyone that can explain what is going on here and how I can fix this behavior ? I´ve read about componentDidMount but don´t know for sure if this will fix everything.