我目前正在从 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);
}, []);
最佳答案
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));
关于javascript - 从 API 端点过滤对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59743342/