您可以在 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 prop 作为数组，而getTabData() 返回一个promise。

我要做的是为项目创建一个状态，在组件渲染到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() {}
}