过滤器包含 false 不是函数

Question

我正在我的对象中搜索一个数组，以使用过滤器和包含返回一个仅在我的类别数组中具有匹配值的对象。出于某种原因，每当我尝试运行我的函数时，都会不断得到

TypeError: 无法读取 null 的属性“包含”

或

TypeError: false 不是函数

如果我在过滤器中使用查找功能。

我做错了什么？

[{
    "entryTitle": "What Is Sports Medicine Acupuncture?",
    "date": "September 30 2015",
    "categories": ["Knee Pain"],
    "type": false
}, {
    "entryTitle": "Providing Quality Care During The COVID-19 Pandemic",
    "date": "March 23 2020",
    "categories": null,
    "type": false
}, {
    "entryTitle": "Correcting Severe Antalgic Posture & Gait",
    "date": "May 09 2020",
    "categories": ["Back Pain"],
    "type": true
}, {
    "entryTitle": "The Successful Treatment Of Sciatica And Low Back Pain With Sports Medicine Acupuncture®",
    "date": "July 24 2020",
    "categories": ["Back Pain"],
    "type": true
}, {
    "entryTitle": "Treating A Quad Strain For A Super Heavyweight Powerlifter Before The KERN US Open Powerlifting Meet",
    "date": "June 28 2018",
    "categories": ["Knee Pain"],
    "type": true
}, {
    "entryTitle": "Treating A High Hamstring Strain Before A Powerlifting Competition Using Sports Medicine Acupuncture®",
    "date": "June 05 2020",
    "categories": ["Back Pain"],
    "type": true
}, {
    "entryTitle": "Free Acupuncture Treatments For Veterans Through The Veterans Choice Program",
    "date": "June 08 2017",
    "categories": ["Back Pain", "Disc Herniation", "Shoulder Pain"],
    "type": true
}, {
    "entryTitle": "The Treatment Of Whiplash Related Injuries With Acupuncture",
    "date": "March 04 2016",
    "categories": ["Disc Herniation"],
    "type": false
}]

我的功能

const [selected, setSelected] = useState("all")
const [posts, setPosts] = useState(postData)

const filterPosts = value => {
  let posts = postData
  if (value !== "all") {
    posts = postData.filter(post => post.categories.includes(value))
    //posts = postData.filter(post => post.categories.find(post.categories === value))

  }
  setSelected(value)
  setPosts(posts)
}

预期结果

{
    "entryTitle": "What Is Sports Medicine Acupuncture?",
    "date": "September 30 2015",
    "categories": ["Knee Pain"],
    "type": false
},
 {
    "entryTitle": "Treating A Quad Strain For A Super Heavyweight Powerlifter Before The KERN US Open Powerlifting Meet",
    "date": "June 28 2018",
    "categories": ["Knee Pain"],
    "type": true
},

Answer 1

这个条目

{
    "entryTitle": "Providing Quality Care During The COVID-19 Pandemic",
    "date": "March 23 2020",
    "categories": null,
    "type": false
}

已将categories 设置为空。你不能在上面做包含。

使用可选链接修复它，或者检查之前是否存在：

post.categories?.includes(value)

或

post.categories && post.categories.includes(value)

Answer 2

在 postData 中的一些 post.categories 是 null ，因此 includes 将无法处理此问题

您需要先检查一下，如果categories 可用，那么您可以检查：

postData.filter(post => post.categories ? post.categories.includes("Knee Pain") : false )

或

postData.filter(post => post.categories && post.categories.includes("Knee Pain"))

---

你可以运行下面的 sn-p，这对你有帮助：

const data = [{
    "entryTitle": "What Is Sports Medicine Acupuncture?",
    "date": "September 30 2015",
    "categories": ["Knee Pain"],
    "type": false
}, {
    "entryTitle": "Providing Quality Care During The COVID-19 Pandemic",
    "date": "March 23 2020",
    "categories": null,
    "type": false
}, {
    "entryTitle": "Correcting Severe Antalgic Posture & Gait",
    "date": "May 09 2020",
    "categories": ["Back Pain"],
    "type": true
}, {
    "entryTitle": "The Successful Treatment Of Sciatica And Low Back Pain With Sports Medicine Acupuncture®",
    "date": "July 24 2020",
    "categories": ["Back Pain"],
    "type": true
}, {
    "entryTitle": "Treating A Quad Strain For A Super Heavyweight Powerlifter Before The KERN US Open Powerlifting Meet",
    "date": "June 28 2018",
    "categories": ["Knee Pain"],
    "type": true
}, {
    "entryTitle": "Treating A High Hamstring Strain Before A Powerlifting Competition Using Sports Medicine Acupuncture®",
    "date": "June 05 2020",
    "categories": ["Back Pain"],
    "type": true
}, {
    "entryTitle": "Free Acupuncture Treatments For Veterans Through The Veterans Choice Program",
    "date": "June 08 2017",
    "categories": ["Back Pain", "Disc Herniation", "Shoulder Pain"],
    "type": true
}, {
    "entryTitle": "The Treatment Of Whiplash Related Injuries With Acupuncture",
    "date": "March 04 2016",
    "categories": ["Disc Herniation"],
    "type": false
}]

console.log(data.filter(post => post.categories ? post.categories.includes("Knee Pain") : false ))

Answer 3

TypeError: Cannot read property 'includes' of null的解释：第二条有nullcategories：

{
    "entryTitle": "Providing Quality Care During The COVID-19 Pandemic",
    "date": "March 23 2020",
    "categories": null,
    "type": false
}

也许你想要post => post.categories!==null ? post.categories.includes(value) : false

TypeError: false is not a function 的解释：a.find accepts a function. find 将在a 的每个条目上运行该函数并返回返回true 的第一个条目。所以你应该使用post.categories.find(category => category===value)。 （你所拥有的没有意义，因为数组不能等于值。）

Answer 4

您可以先检查categories，如下所示：

post.categories && post.categories.includes('Back Pain')

const postData = [{
    "entryTitle": "What Is Sports Medicine Acupuncture?",
    "date": "September 30 2015",
    "categories": ["Knee Pain"],
    "type": false
}, {
    "entryTitle": "Providing Quality Care During The COVID-19 Pandemic",
    "date": "March 23 2020",
    "categories": null,
    "type": false
}, {
    "entryTitle": "Correcting Severe Antalgic Posture & Gait",
    "date": "May 09 2020",
    "categories": ["Back Pain"],
    "type": true
}, {
    "entryTitle": "The Successful Treatment Of Sciatica And Low Back Pain With Sports Medicine Acupuncture®",
    "date": "July 24 2020",
    "categories": ["Back Pain"],
    "type": true
}, {
    "entryTitle": "Treating A Quad Strain For A Super Heavyweight Powerlifter Before The KERN US Open Powerlifting Meet",
    "date": "June 28 2018",
    "categories": ["Knee Pain"],
    "type": true
}, {
    "entryTitle": "Treating A High Hamstring Strain Before A Powerlifting Competition Using Sports Medicine Acupuncture®",
    "date": "June 05 2020",
    "categories": ["Back Pain"],
    "type": true
}, {
    "entryTitle": "Free Acupuncture Treatments For Veterans Through The Veterans Choice Program",
    "date": "June 08 2017",
    "categories": ["Back Pain", "Disc Herniation", "Shoulder Pain"],
    "type": true
}, {
    "entryTitle": "The Treatment Of Whiplash Related Injuries With Acupuncture",
    "date": "March 04 2016",
    "categories": ["Disc Herniation"],
    "type": false
}];

const filteredResult = postData.filter(post => post.categories && post.categories.includes('Back Pain'));
console.log(filteredResult);