javascript - 从 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>
结果在我的下拉菜单中复制了项目。
解决方案
删除重复项
const uniqueItems = [];
tabItems.map(item => {
if (uniqueItems.indexOf(item.documentType) === -1) {
uniqueItems.push(item.documentType)
}
});
this.setState({
tabItems: uniqueItems
}, () => {
推荐阅读
- c++ - CMake 无法找到 SDL2_ttf,我正在尝试以与 SDL2 相同的方式链接它,并且两者都正确安装在 Ubuntu 18.04 上
- javascript - HTMLDialogElement.showModal() 的反义词是什么?
- c++ - 如果不需要参数,是否应该使用 argc 和 argv?
- vim - YouCompleteMe 在 Mac Mojave 上安装 libclang 时抛出 (35) SSL 连接错误
- r - 在 dplyr 链中重命名以包装功能标题
- kubernetes - 根据初始连接将流量定向到 Kubernetes Pod
- assembly - 无法将第 k 位切换为 1
- javascript - 如何根据数据挂钩显示内容?
- javascript - 如何使用jquery获取带有箭头功能的元素的html
- python-3.x - 如何对失败的测试进行单元测试?