Question

过滤器包含 false 不是一个函数

2020-05-14

1890

javascript reactjs

我正在使用过滤器和包含项在对象中搜索数组，以返回仅包含类别数组中匹配值的对象。出于某种原因，每当我尝试运行函数时，如果我在过滤器中使用查找函数，就会不断获得

TypeError: Cannot read property 'includes' of null

或

TypeError: false is not a function

。

我做错了什么？

[{
    "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 设置为 null。您无法对其进行包含。

使用可选链修复此问题，或先检查是否存在：

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"))

您可以运行以下代码片段，不会对您有所帮助：

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 的解释：第二个条目具有 null categories ：

{
    "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 接受一个函数。 find 将在 a 的每个条目上运行该函数并返回第一个返回 true 的条目。因此您应该使用 post.categories.find(category => category===value) 。（您使用的方法毫无意义，因为数组不能等于值。）