我正在编写一个Web部件来查询来自SharePoint Online的数据,返回的数据是使用DetailsList组件显示的,我遇到的问题是查询需要很长时间才能返回结果,Web部件无法获取刷新并保持坐在页面“空”:
对于需要1-2秒的快速查询,Web部件会更新并正常显示结果:
我还希望通过使用 displayLoadingIndicator() 向我的用户提供反馈,以显示Web部件正忙,但我无法使其工作 .
这是我的代码(简称为简称):
- NavigatorWebPart.ts
export default class NavigatorWebPart extends BaseClientSideWebPart<INavigatorWebPartProps> {
protected onInit(): Promise<void> {
this.context.statusRenderer.displayLoadingIndicator(this.domElement, "Querying items...");
return super.onInit();
}
public render(): void {
const element: React.ReactElement<INavigatorProps> = React.createElement(Navigator, {});
ReactDom.render(element, this.domElement);
}
- Navigator.tsx
let listItems : any[] = [];
const listColumns : IColumn[] = [... // shortened for brevity
export default class Navigator extends React.Component<INavigatorProps, IListMembers> {
constructor(props) {
super(props);
this.queryLists();
// this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.state = {
items : listItems,
columns : listColumns,
compactMode : false
};
}
public render(): JSX.Element {
const { items, columns, compactMode } = this.state;
return (
<div>
<div className='ms-SearchBoxSmall'>
<CommandBar
isSearchBoxVisible={ true }
items={ [] }
farItems={ this.listFarItems }
/>
</div>
<div>
<DetailsList
items={ items }
columns={ columns }
compact={ compactMode }
layoutMode={ DetailsListLayoutMode.justified }
selectionMode={ SelectionMode.none }
onColumnHeaderClick={ this._onColumnClick }
/>
</div>
</div>
);
}
public async queryLists() {
await sp.web.lists
.filter("Hidden eq false")
.expand('RootFolder')
.get()
.then( response => {
response.forEach( (item, index) => {
var newData = new Date(item.LastItemModifiedDate).toLocaleDateString() + ' ' + new Date(item.LastItemModifiedDate).toLocaleTimeString();
listItems.push({
"ID" : index,
"URL" : item.RootFolder.ServerRelativeUrl,
"Icon" : item.BaseTemplate,
"Title" : item.Title,
"Total" : item.ItemCount,
"Modified" : newData
});
});
});
}
1 回答
我找到了问题的答案!首先,我放弃 displayLoadingIndicator 以支持使用 **** 的更简单的解决方案:
然后将一个名为 loading 的新字段添加到组件 state 以监视 queryLists() 的完成,一旦此方法返回所有结果,组件 state 将被更新,**将在下一次渲染时被丢弃 .
事实证明我的代码是正确的:)我的问题是在组件 **** - 您必须更新组件的属性 key 才能在页面上获取其内容"updated",所以我的代码现在如下: