0

SharePoint Online からデータを照会する Web パーツを作成しています。返されたデータは 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
          });

        });
      });
  }  
4

1 に答える 1

0

私は自分の問題に対する答えを見つけました!最初に、 displayLoadingIndicatorを削除して、よりシンプルなソリューションを採用しました。:

const loadingStatus: JSX.Element = this.state.loading ? <div style={{margin: '0 auto'}}><Spinner label={'Loading libraries and lists...'} /></div> : <div/>;

次に、 load という新しいフィールドがコンポーネントの状態に追加され、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
        });
      });
  } 
于 2018-09-14T23:56:23.047 に答える