使用自定义过滤器按钮过滤列表，在第一次点击时有效，但随后的点击效果不佳！ SPFX

Posted 2021-04-27

我有2个SP列表（A和B）。列表A在每个列表项旁边都有过滤器按钮。当用户单击按钮时，它应该过滤列表B，仅显示相关项目。

列表A具有一个ID列，列表B将它的列（MasterItems）与列表A的ID匹配。

这是我使用的代码：

public _getListItems() {
    sp.web.lists.getByTitle("ListA").items.get().then((items: any[]) => {
      let returnedItems: IListAItem[] = items.map((item) => { return new ListAItem(item); });

      this.setState({ 
        Items: returnedItems,
        ListAItems: returnedItems,

      });
    });
    sp.web.lists.getByTitle("ListB").items.get().then((items: any[]) => { 
      let returnedItems: IListBItem[] = items.map((item) => { return new ListBItem(item); });

      this.setState({ 

        ListBItems: returnedItems, //This brings in the items from ListB so they can be filtered on this.state.ListB when clicked
      });
    }); 
  }
  private _editItem = (ev: React.MouseEvent<htmlElement>) => {
   this._getListItems(); //This attempts to reset the list when another filter is clicked, but is half working!
    const sid = Number(ev.currentTarget.id);
    const sid2 = 'DIBR'+sid;
    let _item = this.state.ListBItems.filter((item) => { return item.MasterItem == sid2; });

    if (_item && _item.length > 0) {

      sp.web.lists.getByTitle("ListB").items.get().then((items: any[]) => {
        let returnedItems: IListBItem[] = 
            items.filter(i => _item.some(other => other.Id === i.Id)).map(
              (item) => new ListBItem(item)
              );

        this.setState({ 
          ListBItems: returnedItems,
         });
      });
     } 
  }  

问题是，当单击某个项目旁边的按钮时，它会在第一次单击时正确过滤！但是如果在相同或不同的项目上再次进行过滤，则有时会取消设置过滤器并混合结果，而有时会正确过滤。因此，我怀疑自己在这里遇到了州问题，但似乎找不到原因。

问候，

T

更新：我添加了一个清除过滤器按钮，该按钮可以使事情正常运行，但是希望用户能够单击过滤器进行过滤，而不必每次都将其清除。

答案

我在SharePoint列表中也这样做所以基本上我总是将清除过滤器功能设置在过滤器功能之前，例如：

function myFilter(){
//my filter code goes here
}

function clearFilter(){
//the clear filter code goes here
}

让您说您正在选择项目，单击按钮或更改文本输入来运行该功能，请将清除过滤器设置为在过滤器之前运行。

function funcGroup{
clearFilter();

setTimeout(() => {
    myFilter();  
}, 300);

}

我正在将这种情况与我的SharePoint列表一起使用，并且可以正常使用...