javascript - 如何使用数组过滤对象数组

Question

我知道堆栈中已经有很多类似的问题，但我似乎无法解决我的问题。我正在寻找具有另一个数组条件的对象来过滤一个数组。

const jobPost = [
    {
        id: 1,
        companyName: "Photosnap",
        jobTitle: "Senior Frontend Developer",
        companyLogo: "./photosnap.svg",
        skills: ["Frontend", "Senior", "HTML", "CSS", "JavaScript"],
        new: true,
        featured: true,
        dayOfPost: "1d ago",
        contract: "Full Time",
        region: "USA only"
    },
    {
        id: 2,
        companyName: "Manage",
        jobTitle: "Fullstack Developer",
        companyLogo: "./manage.svg",
        skills: ["Fullstack", "Midweight", "Python", "React"],
        new: true,
        featured: true,
        dayOfPost: "1d ago",
        contract: "Part Time",
        region: "Remote"
    },
    {
        id: 3,
        companyName: "Account",
        jobTitle: "Junior Frontend Developer",
        companyLogo: "./account.svg",
        skills: ["Frontend", "Junior", "React", "Sass", "JavaScript"],
        new: true,
        featured: false,
        dayOfPost: "2d ago",
        contract: "Part Time",
        region: "USA only"
    },
    {
        id: 4,
        companyName: "MyHome",
        jobTitle: "Junior Frontend Developer",
        companyLogo: "./myhome.svg",
        skills: ["Frontend", "Junior", "CSS", "JavaScript"],
        new: false,
        featured: false,
        dayOfPost: "5d ago",
        contract: "Contract",
        region: "USA only"
    },
    {
        id: 5,
        companyName: "Loop Studios",
        jobTitle: "Software Engineer",
        companyLogo: "./loop-studios.svg",
        skills: ["Fullstack", "Midweight", "JavaScript", "Sass", "Ruby"],
        new: false,
        featured: false,
        dayOfPost: "5d ago",
        contract: "Full Time",
        region: "Worldwide"
    },
    {
        id: 6,
        companyName: "FaceIt",
        jobTitle: "Junior Backend Developer",
        companyLogo: "./faceit.svg",
        skills: ["Backend", "Junior", "Ruby", "RoR"],
        new: false,
        featured: false,
        dayOfPost: "2w ago",
        contract: "Full Time",
        region: "UK only"
    },
    {
        id: 7,
        companyName: "Shortly",
        jobTitle: "Junior Developer",
        companyLogo: "./shortly.svg",
        skills: ["Frontend", "Junior", "HTML", "Sass", "JavaScript"],
        new: false,
        featured: false,
        dayOfPost: "2w ago",
        contract: "Full Time",
        region: "Worldwide"
    },
    {
        id: 8,
        companyName: "Insure",
        jobTitle: "Junior Frontend Developer",
        companyLogo: "./insure.svg",
        skills: ["Frontend", "Junior", "Vue", "JavaScript", "Sass" ],
        new: false,
        featured: false,
        dayOfPost: "2w ago",
        contract: "Full Time",
        region: "USA only"
    },
    {
        id: 9,
        companyName: "Eyecam Co.",
        jobTitle: "Full Stack Engineer",
        companyLogo: "./eyecam-co.svg",
        skills: ["Fullstack", "Midweight", "JavaScript", "Django", "Python" ],
        new: false,
        featured: false,
        dayOfPost: "3w ago",
        contract: "Full Time",
        region: "Worldwide"
    },
    {
        id: 10,
        companyName: "The Air Filter Company",
        jobTitle: "Front-end Dev",
        companyLogo: "./the-air-filter-company.svg",
        skills: ["Frontend", "Junior", "React", "Sass", "JavaScript" ],
        new: false,
        featured: false,
        dayOfPost: "1m ago",
        contract: "Part Time",
        region: "Worldwide"
    }
    
]

export default jobPost;

jobpost 数组保存在一个名为 jobDB.js 的单独文件中，并通过导入导入到我的 app.js 中。

import jobDB from "./components/modules/jobDB";



const App = () =>{
const [searchTerms, setSearchTerms] = useState([]); 

const checkCriteria = (data) =>{
   searchTerms.some(term => {
   return data.skills.includes(term);
 })
}

const onClick = (e) => {
    const {textContent} = e.target;
    if (!searchTerms.includes(textContent)){
      setSearchTerms([...searchTerms, textContent])
    }
};

return (
  {searchTerms.length > 0? jobDB.filter(checkCriteria).map(createPost) : 
  jobDB.map(createPost)}
 )

}

searchTerm 数组在用户界面点击时更新，但过滤后的数组总是返回空。

请帮忙！我已经盯着这个问题将近 24 小时了。

标签： javascriptarrays

Answer 1

您忘记返回过滤器函数的实际结果

const checkCriteria = (data) => {
   return searchTerms.some(term => {
     return data.skills.includes(term);
   })
}