[英]SPFX - Refreshing Web Part after long interval
我正在編寫一個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>
<br />
<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
});
});
});
}
我找到了問題的答案! 首先,我放棄了displayLoadingIndicator,以支持采用一種更簡單的解決方案 :
const loadingStatus: JSX.Element = this.state.loading ? <div style={{margin: '0 auto'}}><Spinner label={'Loading libraries and lists...'} /></div> : <div/>;
然后,將一個名為loading的新字段添加到組件狀態以監視queryLists()的完成,一旦此方法返回所有結果,組件狀態將被更新,**將在下一次渲染時被丟棄。
原來我的代碼是正確的:)我的問題出在組件中 -您必須更新組件的屬性鍵才能在頁面上“更新”其內容,因此我的代碼如下:
public render(): React.ReactElement<IPnPListsProps> {
const loadingStatus: JSX.Element = this.state.loading ? <div style={{margin: '0 auto'}}><Spinner label={'Loading libraries and lists...'} /></div> : <div/>;
return (
<div>
<div className='ms-SearchBoxSmall'>
<CommandBar
isSearchBoxVisible={ true }
items={ [] }
/>
</div>
<br />
<div>
<DetailsList
key={ new Date().getTime() } // this will get the component refreshed everytime!
items={ listItems }
columns={ listColumns }
layoutMode={ DetailsListLayoutMode.justified }
selectionMode={ SelectionMode.none }
/>
</div>
{loadingStatus}
</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
});
this.setState({
items : listItems,
loading : false
});
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.