您可以在 DetailsList 中调用异步函数吗？

Question

我在 SPFx Web 部件中有一个异步函数，它从 SPO 列表中获取数据。

    public async getTabData(theList = "ListOfLinks") {

      console.log('getTabData');

      let web = Web(this.props.webURL);
web.lists.getByTitle("ListOfLinks").items.select(...colsToSelect).get();
      const items: any[] = await web.lists.getByTitle(theList).items.get();
      console.log('items:' + items);

是否可以从 DetailsList 调用此函数？

我试着这样做

<DetailsList          
                  items={this.getTabData(item.ListToShow)}

但是它说...

Type 'Promise<any[]>' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more.ts(2740)
DetailsList.types.d.ts(60, 5): The expected type comes from property 'items' which is declared here on type 'IntrinsicAttributes & IDetailsListProps & { children?: ReactNode; }'
(JSX attribute) IDetailsListProps.items: any[]

谢谢 P

Answer 1

问题是 <DetailsList /> 接受 items 道具作为数组，而 getTabData() returns 承诺.

我要做的是为项目创建一个状态，在 componentDidMount() 中组件呈现后调用 getTabData() 函数，然后在 getTabData() 中更新 items异步工作完成。

更新 items 后，组件将使用新数据重新呈现。

class YourComponent extends Component {
  constructor(props) {
    super(props);
    this.items = [];
  }

  componentDidMount() {
    this.getTabData(item.ListToShow);
  }

  public async getTabData(theList = "ListOfLinks") {
    let web = Web(this.props.webURL);
    web.lists
      .getByTitle("ListOfLinks")
      .items.select(...colsToSelect)
      .get();
    const items: any[] = await web.lists.getByTitle(theList).items.get();
    console.log("items:" + items);

    this.setState({ items });
  }

  render() {}
}

您可以在 DetailsList 中调用异步函数吗？

Can you call an async function in a DetailsList?

sharepoint

reactjs

sharepoint-online

spfx