javascript - 从 API 端点过滤对象数组

Question

我目前正在从 API 端点获取名为 Skills 的对象数组。我试图过滤掉 skills 对象并返回一个新数组。然后我会将其作为 Prop 传递给名为 SkillsDetails 的子组件我当前遇到的问题是，我希望父组件 SkillsTable 中的这个新过滤数组有一个条件，即仅返回具有匹配的 skillsId 的对象我目前正在子组件中使用。

因此，作为返回，我希望新的过滤器数组仅在与 skillsId 匹配时才出现在我的子组件中。

这是我的技能数组:

0: {id: 5, profileName: "Jon Snow", skillId: 3, comment: "test", location: "N/A", City: "NY"}
1: {id: 5, profileName: "John Smith", skillId: 4, comment: "testing", location: "N/A", City: "NYC"}

在SkillsTable组件中进行过滤:

const skillsDetals=(skills => skills.filter === skillsId) => {
return skillsDetails

技能详情:

const SkillsDetails= ({ skillsId}) => {
    console.log(skillsId, "skills");
    const classes = useStyles();


    useEffect(() => {
        getSkillsDetails(skillsId);
    }, []);

Answer 1

array::filter接受一个回调函数来调用数组的每个元素。对于您希望保留在新返回数组中的任何元素，回调都会返回 true。

const skills = [
  {id: 5, profileName: "Jon Snow", skillId: 3, comment: "test", location: "N/A", City: "NY"},
  {id: 5, profileName: "John Smith", skillId: 4, comment: "testing", location: "N/A", City: "NYC"},
];

// array filter callback function
// destructures the current element's `skillId` property
function skillIdFilter({ skillId }) {
  return skillId === this;
}

// array.filter(currentElement, thisArgInCAllback)
const filterBySkillId = (array, skillId) => array.filter(skillIdFilter, skillId);

console.log(filterBySkillId(skills, 3));
console.log(filterBySkillId(skills, 4));