SPFX webpart not rendering data untill browser console is opened

%3CLINGO-SUB%20id%3D%22lingo-sub-167704%22%20slang%3D%22en-US%22%3ESPFX%20webpart%20not%20rendering%20data%20untill%20browser%20console%20is%20opened%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-167704%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFor%20a%20customer%20we%20have%20been%20asked%20to%20make%20a%20webpart%20that%20can%20list%20all%20the%20current%20subsites%20for%20the%20site%20that%20a%20user%20is%20on.%3C%2FP%3E%0A%3CP%3EThis%20was%20asked%20to%20be%20done%20using%20react%20%22DetailList%22.%3C%2FP%3E%0A%3CP%3EI%20am%20not%20super%20familiar%20with%20react%20and%20while%20testing%20my%20webpart%2C%20I%20noticed%20that%20the%20data%20did%20not%20get%20rendered%20or%20fetched%20unless%20I%20opened%20the%20browser%20console.%3C%2FP%3E%0A%3CP%3EWhen%20I%20run%20the%20webpart%20a%20lot%20of%20'requests'%20are%20done%20and%20my%20webpart%20renders%20the%20basics%2C%20but%20some%20requests%20only%20get%20done%20when%20I%20open%20my%20console.%20Only%20on%20the%20moment%20that%20I%20open%20my%20browser%20console%2C%20do%20all%20the%20subsites%20get%20rendered%20inside%20the%20DetailList.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20will%20include%20some%20of%20the%20code%20I%20wrote%20to%20show%20as%20to%20what%20we%20did%2C%20but%20is%20there%20someone%20that%20can%20verify%20what%20causes%20this%20behavior%2C%20or%20can%20tell%20me%20how%20to%20fetch%20the%20data%20properly%20to%20render%20inside%20the%20Detaillist%20webpart%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Efirst%20I%20pass%20my%20httpclient%20and%20siteurl%20to%20the%20TSX%20file%20by%20giving%20it%20in%20the%20react.createElement%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22screen%201%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F29648i2C9A7420303F2DD1%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Screenshot_1.png%22%20alt%3D%22screen%201%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3Escreen%201%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Eafter%20that%20in%20the%20constructor%20of%20the%20TSX%20file%2C%20I%20put%20the%20code%20that%20will%20define%20the%20state%20of%20the%20component%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Screenshot_2.png%22%20style%3D%22width%3A%20513px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F29649iF6F69160662BC689%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Screenshot_2.png%22%20alt%3D%22Screenshot_2.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E(I%20know%20after%20doing%20more%20research%20that%20this%20is%20not%20hte%20best%20method%20to%20do%20it%20but%20I%20followed%20an%20example%20%3A)%3C%2Fimg%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B)%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Ethe%20code%20that%20is%20done%20in%20the%20renderlistasync%20method%20to%20give%20you%20an%20example%20of%20what%20happens%20inside%20the%20method%20(%20it%20was%20a%20lot%20shorter%20but%20I%20experimented%20a%20lot%20to%20try%20and%20find%20a%20solution%20)%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Screenshot_3.png%22%20style%3D%22width%3A%20606px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F29650iCA60561F944E9D8D%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Screenshot_3.png%22%20alt%3D%22Screenshot_3.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Ewhen%20I%20run%20my%20webpart%2C%20this%20is%20the%20output%20that%20I%20get%20when%20adding%20the%20webpart%20to%20my%20workbench%20on%20sharepoint%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3ENotice%3C%2FSTRONG%3E%20the%20last%20request%20that%20was%20performed%20(highlighted%20in%20red)%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Screenshot_4.png%22%20style%3D%22width%3A%20731px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F29651i56C115DDC0E5A694%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Screenshot_4.png%22%20alt%3D%22Screenshot_4.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Enow%20as%20you%20can%20see%20the%20in%20the%20following%20picture%2C%20the%20subsites%20of%20the%20current%20page%20are%20not%20shown%20inside%20the%20webpart%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Screenshot_5.png%22%20style%3D%22width%3A%20996px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F29652i728A6C174B37C237%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Screenshot_5.png%22%20alt%3D%22Screenshot_5.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3ENow%20when%20I%20open%20my%20browser%20console%2C%20there%20are%202%20new%20requests%20that%20get%20done%20%3A%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Screenshot_6.png%22%20style%3D%22width%3A%20489px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F29655iCB8D07F167B6827E%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Screenshot_6.png%22%20alt%3D%22Screenshot_6.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Eand%20the%20webpart%20suddently%20gets%20all%20the%20subsites%20from%20the%20current%20site%20that%20the%20workbench%20is%20on.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Screenshot_7.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F29656iD4C7B2550DCDB86D%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Screenshot_7.png%22%20alt%3D%22Screenshot_7.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3Enow%20is%20there%20anyone%20that%20can%20explain%20what%20is%20going%20on%20here%20and%20how%20I%20can%20fix%20this%20behavior%20%3F%20I%C2%B4ve%20read%20about%20componentDidMount%20but%20don%C2%B4t%20know%20for%20sure%20if%20this%20will%20fix%20everything.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-167704%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESPFx%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EWebPart%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-167737%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20webpart%20not%20rendering%20data%20untill%20browser%20console%20is%20opened%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-167737%22%20slang%3D%22en-US%22%3E%3CP%3ELooking%20at%20your%20code%20I%20think%20an%20exception%20occurs%20calling%20Console.log%20if%20you%20don't%20have%20your%20Browser%20Console%20open.%20This%20Exception%20causes%20your%20code%20to%20stop%20executing.%20Before%20using%20Console%20you%20should%20check%20if%20it%20is%20not%20%22undefined%22.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ESee%20also%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fstackoverflow.com%2Fquestions%2F3326650%2Fconsole-is-undefined-error-for-internet-explorer%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fstackoverflow.com%2Fquestions%2F3326650%2Fconsole-is-undefined-error-for-internet-explorer%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Deleted
Not applicable

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 1screen 1

 

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

Screenshot_2.png

(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 )

 

Screenshot_3.png

 

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)

Screenshot_4.png

 

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

 

Screenshot_5.png

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

 

Screenshot_6.png

 

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

Screenshot_7.png

 

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.

1 Reply
Highlighted

Looking at your code I think an exception occurs calling Console.log if you don't have your Browser Console open. This Exception causes your code to stop executing. Before using Console you should check if it is not "undefined". 

 

See also:

https://stackoverflow.com/questions/3326650/console-is-undefined-error-for-internet-explorer