获取仅包含选定值的对象REACT

时间:2019-03-07 12:23:44

标签: reactjs checkbox filter

我有一个数组,用于保存对象ID。 我遍历所有对象以从数组中找到包含ID的对象。 如果选择多个复选框,则会从数组中获取每个包含任何ID的对象。但是目标是仅获取包含所有选定对象的那些对象。

我的代码:

this.state.filterSelected: ["231", "232", "130"]
data = [
 {
    title: 'title one'
    id: ['130', '231', '232']
 }
 {
    title: 'title two'
    id: ['130', '231', '232', '233']
 }
 {
    title: 'title three'
    id: ['130', '231']
 }
]
const checkbox = () => {
  let base = [];
  for (let i = 0; i < this.state.filterSelected.length; i++) {
    let foo = data.filter(article =>
      article[property]
        ? article[property].includes(this.state.filterSelected[i])
        : null
    );
    base.push(foo);
  }

  let uniqueObj = [...new Map(base.flat().map(o => [o.id, o])).values()];

  this.setState({ print: uniqueObj });
};

我只想获取包含所有filterSelected的“标题一”和“标题二”的对象。

最近更新:

if(e.target.getAttribute('vocabulary') === 'tags'){
                property = 'tags_array';
            }
            if(e.target.getAttribute('vocabulary') === 'type'){
                property = 'types_array';
            }
            if(e.target.getAttribute('vocabulary') === 'related'){
                property = 'related_to_array';
            }

1 个答案:

答案 0 :(得分:1)

您可以在filter内部使用every函数来检查数组的每个元素是否返回一个true值。

您必须将其应用于this.state.filterSelected,然后在其中添加includes

工作示例:

const filter = ["231", "232", "130"]
const data = [
    {
        title: 'title one',
        id: ['130', '231', '232']
    },
    {
        title: 'title two',
        id: ['130', '231', '232', '233']
    },
    {
        title: 'title three',
        id: ['130', '231']
    }
]

const res = data.filter(({ id }) => filter.every(i => id.includes(i)))

console.log(res)

如果您的属性名称是动态的,则可以将filter中的解构更改为:

data.filter(({ [property]: id }) => filter.every(i => id.includes(i)))