如何检查数组是否有多个值并在满足值时推送到新数组？

Question

我有一个要映射的数据列表，并查看每个单独项中的数组是否包含一组特定的字符串，如果包含，我想将该单独项推送到新数组中。

某些项目可能包含多个值，因此如果需要，我可能需要将此项目推送到多个新数组。

为了让您了解数据，它是一个对象数组，其值如下：

0: {...}
1: {...}
2: {...}
3: {
   id: xyz
   name: test
   tags: ["Mechanical", "Director/Leadership", "Specialist"]
}

我要在其中寻找匹配项的字符串数组称为“标签”

并且我已经在我的状态下设置了一个空数组列表，准备在满足这些标签值之一时将项目推送到其中，如下所示：

  const [mechanical, setMechanical] = useState([]);
  const [director, setDirector] = useState([]);
  const [specialist, setSpecialist] = useState([]);

如何使用 .map() 来遍历我的数据并判断该项目是否包含标签“机械”，将该项目推入机械状态数组？但是如果它还包含“专家”，那么将该项目也推入专家数组吗？等等等等。

（这个数组中有 6 或 7 个字符串，我可以寻找匹配项。

然后我将映射 UI 中的不同状态并渲染这些项目。

Answer 1

使用Array.reduce()，然后遍历tags数组，将对象推入对应的列表中。

const data = [
  {
    id: 'xyz',
    name: 'test',
    tags: ["Mechanical", "Director/Leadership", "Specialist"]
  },
  {
    id: '123',
    name: '123 name',
    tags: ["Mechanical", "Specialist"]
  }
];

const getProcessedList = (list) => {
  return list.reduce(([mechanical, director, specialist], currentObj) => {
    currentObj.tags.forEach((tag) => {
      switch (tag.toLowerCase()) {
        case 'mechanical':
          mechanical.push(currentObj);
          break;
        case 'director/leadership':
          director.push(currentObj);
          break;
        case 'specialist':
          specialist.push(currentObj);
          break;
        case Default:
          break;
      }
    });
    return [mechanical, director, specialist];
  }, [[], [], []]);
};

const [mechanical, director, specialist] = getProcessedList(data);
console.log("mechanical: ", mechanical);
console.log("director: ", director);
console.log("specialist: ", specialist);

Answer 2

您应该使用 forEach 而不是 map，因为您不需要从数据中创建新数组。

data.forEach(({tags, ...rest}) => {
  if (tags.includes("Mechanical")) {
    setMechanicals([...mechanicals, rest])
  }

  if (tags.includes("Director/Leadership")) {
    setDirectors([...directors, rest])
  }

 if (tags.includes("Specialist")) {
    setSpecialists([...specialists, rest])
  }
})

Answer 3

您可以遍历项目和标签，将项目存储到特定的数组中，最后更新状态。检查下面的代码-

const data = [
  {
   id: 'xyz',
   name: 'test',
   tags: ["Mechanical", "Director", "Specialist"]
  },
  {
   id: 'abc',
   name: 'abc',
   tags: ["Mechanical", "Specialist"]
  }
];

const _mechanical = [];
const _director = [];
const _specialist = [];

for (const item of data) {
  if (item?.tags?.length > 0) {
    for (const tag of item.tags) {
      switch(tag.toLowerCase()) {
        case 'mechanical':
          _mechanical.push(item);
          break;
        case 'director':
          _director.push(item);
          break;
        case 'specialist':
          _specialist.push(item);
          break;
      }
    }
  }
}

console.log(JSON.stringify(_mechanical));
console.log(JSON.stringify(_director));
console.log(JSON.stringify(_specialist));

最后，用特定的数组更新状态。

setMechanical(_mechanical);
setDirector(_director);
setSpecialist(_specialist);