我了解与此有关的堆栈中已经有很多类似的问题,但是我似乎无法解决我的问题。我正在寻找一个对象与另一个数组的条件过滤一个数组。
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个小时。
您忘记返回过滤器功能的实际结果
const checkCriteria = (data) => {
return searchTerms.some(term => {
return data.skills.includes(term);
})
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句