Как использовать pageContext в SPFx?

Я пытаюсь получить значение с текущей страницы с помощью pageContext, но получаю либо undefined, либо 404. Вот такая ситуация: в библиотеке страниц сайта есть несколько страниц новостей. К каждой странице новостей прикреплены теги. Эти теги находятся в настраиваемом столбце библиотеки страниц сайта. Есть новости, у которых есть 1 тег и несколько других тегов. Это может быть ситуация, когда у двух или более новостей один и тот же тег (и). Цель состоит в том, что когда я открываю страницу новостей, теги, прикрепленные к этой новости, также видны.

До сих пор я использую @ pnp / pnpjs, и код выглядит так:

var result: any = await sp.web.lists.getByTitle("Site Pages")
  .items.getById(15)
  .select("Tags")
  .get();

return await result.Tags;

И это дает мне ошибку 404

Я тоже пробовал это:

this.context.pageContext.list('Site Pages').listItem['Tags'].get().then((items: any[]) => {
  console.log(items);
});

Но это дает мне Невозможно прочитать список свойств undefined

У вас есть идея, как связать значение столбца Теги с текущими новостями?

Вот обновление. Теперь я получаю нужный тег. Теперь вопрос, как это показать на экране?

import * as React from 'react';
import styles from './ReadTags.module.scss';
import { IReadTagsProps } from './IReadTagsProps';
import { sp } from '@pnp/pnpjs';

export default class ReadTags extends React.Component<IReadTagsProps, {}> {
  constructor(props: IReadTagsProps) {
    super(props);

  }

  private async getTags() {
      var id = this.props.context.pageContext.listItem.id;
      var result: any = await sp.web.lists.getByTitle("Site Pages")
        .items.getById(id)
        .select("Tags")
        .get();

      return await result.Tags;
  }

  public render(): React.ReactElement<IReadTagsProps> {
    console.log(this.getTags());
    return (
      <div className={ styles.readTags }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

С уважением, Amerco


person Americo Perez    schedule 02.03.2019    source источник


Ответы (1)


Что вы, вероятно, захотите сделать, так это сохранить свои теги в состоянии вашего компонента. Затем вы можете показать их (если значение из состояния не пусто) во время рендеринга. Я настоятельно рекомендую изучить руководство по React, чтобы понять жизненный цикл и состояние / свойства React.

https://reactjs.org/tutorial/tutorial.html

https://reactjs.org/docs/state-and-lifecycle.html

Что-то с получением ваших данных в componentDidMount, сохранением их в состоянии с помощью this.setState и последующим их просмотром при рендеринге с помощью this.state.tags. Это скорее вопрос React, чем вопрос SPFx :)

Здесь масса примеров с SPFx и React:

https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples

person Judith    schedule 14.03.2019