如何在SPFX中使用PageContext

Question

我正在尝试通过使用PageContext从当前页面获得一个值，但我得到的是未定义或404。这就是情况：在网站页面库中，有几个新闻页面。每个新闻页面都附有一些标签。此标签属于站点页面库中的自定义列中。有新闻有1个标签和其他几个标签。这可能是两个或多个新闻共享相同标签的情况。目的是当我打开新闻页面时，也可以看到附加到该新闻的标签。

到现在为止

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);
});

，但它给我无法阅读未定义的属性

的属性列表

du您有一个想法如何获得与当前新闻相关的标签列的值？

这是一个更新现在我得到了正确的标签。现在的问题是如何在屏幕上显示它？

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

Answer 1

您可能想做的就是将标签存储在组件状态。然后，您可以在渲染过程中显示这些（如果来自状态的值不是空的）。我强烈建议通过React教程来了解React React生命周期和状态/道具。

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

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

将您的数据获取在ComponentDidmount中，通过使用this.setstate将其存储在状态中，然后使用this.state.tags将其存储在状态中。这是一个反应问题，然后是一个spfx问题：）

这里有很多带有SPFX的样本，并反应：

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