使用 SPFX React 创建级联下拉列表

Question

我是 SPFX 的新手。我正在尝试构建一个 Web 部件属性窗格，其中有 2 个下拉菜单。一个在当前站点中有列表，另一个将填充在下拉列表中选择的列表中的项目。

以下是我的代码我在第二个下拉列表中没有得到任何东西

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField,PropertyPaneDropdown,IPropertyPaneDropdownOption
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
   

import{SPHttpClient,SPHttpClientResponse } from '@microsoft/sp-http';

import * as strings from 'ThewebpartWebPartStrings';
import Thewebpart from './components/Thewebpart';
import { IThewebpartProps } from './components/IThewebpartProps';



export default class ThewebpartWebPart extends BaseClientSideWebPart<IThewebpartProps> {

  private _siteLists:string[];
  private alllistitems:IPropertyPaneDropdownOption[];
  private itemsDropdownDisabled: boolean = true;

  public render(): void {
    const element: React.ReactElement<IThewebpartProps> = React.createElement(
      Thewebpart,
      {
        description: this.properties.description,
        webURL:this.context.pageContext.web.absoluteUrl,
        sitelist:this.properties.sitelist,
        listitems:this.properties.listitems
   
        
      }
    );

    ReactDom.render(element, this.domElement);
  }

  private async _getSiteLists():Promise<string[]>{
    const endpoint: string = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$select=Title%20&$filter=Hidden eq false &$orderby=Title &$top=10`;
    
    const rawResponse:SPHttpClientResponse= await     this.context.spHttpClient.get(endpoint,SPHttpClient.configurations.v1);
    return (await rawResponse.json()).value.map(
      (list:{Title:string})=>{

        return list.Title;


      }
    );
  }

  private async _getlistitems(listname:string):Promise<string[]>{
    console.log("items")
  const endpoint:string=`${this.context.pageContext.web.absoluteUrl}/_api/lists/GetByTitle('${listname}')/items?$select=Title`;
  const rawResponse:SPHttpClientResponse=await this.context.spHttpClient.get(endpoint,SPHttpClient.configurations.v1);

  console.log(endpoint);


  return(await rawResponse.json()).value.map(
    (list:{Title:string})=>{
      return list.Title;
    }
    );
  }

  protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {

    if(propertyPath='listitems' && newValue)
    {
     
      this.itemsDropdownDisabled=false;      
      const allistitems=  this._getlistitems(propertyPath);
      
      super.onPropertyPaneFieldChanged(propertyPath,oldValue,newValue);
      this.context.propertyPane.refresh();
      this.render();
    }
    else{
      console.log("oldvalue");

      super.onPropertyPaneFieldChanged(propertyPath,oldValue,oldValue);

      console.log("oldvalue::" + oldValue);
    }
    
  }
  

 protected async onInit(): Promise<void> {
         
    this._siteLists=await this._getSiteLists();        

    return super.onInit();
  }





  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                PropertyPaneDropdown('sitelist',{
                  label:'Lists in Current Site',
                  options:this._siteLists.map((list:string)=>{
                    return<IPropertyPaneDropdownOption>{key:list,text:list}


                  })
                }),
                  PropertyPaneDropdown('listitems',{
                    label:'Selected Items',
                    options:this.alllistitems,
                    disabled:this.itemsDropdownDisabled                    
  
                    })



              ]
            }
          ]
        }
      ]
    };
  }
}

第二个下拉菜单是可见的，但里面没有任何项目。 当我查看控制台时，这就是我得到的所有项目列表值返回alllsititemsare：[object Promise]