Fluentui: Detailslist and Promise function

[FullStackRafik]

I get this error when I fill my Detailslist from a promise function:
Uncaught (in promise) typeerror cannot read property 'length' of undefined.
Any suggestions please?

Thanks

[Vitalius1]

DetailsList has a required prop items which is, of course, the array of the items to be rendered. During its initial render and then through updating the component it's doing a bunch of checks on items.length. So the question to you would be if there is a case when you are not passing at least an empty array?

[FullStackRafik]

There is no case where I'm not passing at least an empty array, I'm always passing an array filled with items or empty, the problem came from the promise function.
Do you think that this compenent (DetailsList) manage the case where items are filled from a promise function, here is my DetailsList:

    <Fabric.DetailsList onItemInvoked={this._onItemInvoked}  isHeaderVisible={false} 
       items={ this.state.items } columns={[
        { key: 'title', name: 'title', fieldName: 'title', minWidth: 100, maxWidth: 200, isResizable: true }
      ] }
       selectionMode={Fabric.SelectionMode.multiple}  data-is-scrollable="true" 
     />

Where this.state.items are filled from this promise function

loadItems(): Promise return new Promise ......
});
}

[FullStackRafik]

Just for information:
The DetailsList display the items correctly, but I can see the error on the console.

[Vitalius1]

@dzearing, @KevinTCoughlin would appreciate your input here.

[KevinTCoughlin]

Here's a DetailsList example that asynchronously fetches data from an API and updates the control's items, https://codepen.io/dzearing/pen/EgqMZq?editors=1010.

@FullStackRafik, a full code repro / sample would help debug the issue. It seems like you are returning or trying to access a non-Array type hence the exception.

The DetailsList items property expects an Array-like value, see https://github.com/OfficeDev/office-ui-fabric-react/blob/c5bd15cac8d0ac94021ce5d6478661991c40d7d0/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts#L69

Currently, there is no built-in property for handling async data fetching. My advice would be to look at the async data example Codepen linked above for guidance. If still blocked then supply the full-code to see where the exception is occurring.

[FullStackRafik]

@KevinTCoughlin
Thanks for your answer, but I've already implemented an async fetches data with success, although the error was due to the fact that items object wasn't initialized, that's why I get the error.
Now it's resolved, I had just to initialize items like that:
this.state = {
items: [],
};

Thanks anyway for your inputs.

[Vitalius1]

Thanks for getting back to us with a resolution!

[msft-github-bot]

This issue has been marked as being beyond the support scope of UI Fabric's issues board. It will now be closed automatically for house-keeping purposes.