首页 > 解决方案 > 从 API 复制下拉过滤器项 - Reactjs

问题描述

我已经创建了我的下拉菜单,但不幸的是它从 API 收到了重复的值。我从 BE 收到一定数量的文件,其中一些具有相同的名称,因此在我的下拉列表中我收到了重复的名称。我的代码如下所示:

我的功能

divideItems = () => {

        let startIndex = ((parseInt(this.state.activePaginationTab) + 1) * this.state.rowsPerPage) - this.state.rowsPerPage;
        let endIndex = (parseInt(this.state.activePaginationTab) + 1) * this.state.rowsPerPage - 1;
        let tabItems = [];

        for (let i = startIndex; i <= endIndex; i++) {
            if (this.state.items[i]) {
                tabItems.push(this.state.items[i]);
            }
        }

        this.setState({
            tabItems: tabItems
        }, () => {

        });

我的渲染

<RBS.Dropdown>
     <RBS.Dropdown.Toggle  id="dropdown-invoice-header">
          {translations.type}
     </RBS.Dropdown.Toggle>

         <RBS.Dropdown.Menu>
              {this.state.tabItems.map(item => (
       <RBS.Dropdown.Item >{item.documentType}</RBS.Dropdown.Item>
))}
           </RBS.Dropdown.Menu>
      </RBS.Dropdown>

结果在我的下拉菜单中复制了项目。

在此处输入图像描述

标签: javascriptarraysreactjsapi

解决方案


删除重复项

const uniqueItems = [];
tabItems.map(item => {
    if (uniqueItems.indexOf(item.documentType) === -1) {
        uniqueItems.push(item.documentType)
    }
});


this.setState({
    tabItems: uniqueItems 
}, () => {


推荐阅读