JavaScript 过滤器在我的 NUXT 应用程序中无法正常工作答案

【问题标题】：JavaScript filter not working properly in my NUXT appJavaScript 过滤器在我的 NUXT 应用程序中无法正常工作
【发布时间】：2021-09-30 13:02:21
【问题描述】：

我有一组从 API 获取的对象，我想根据 _id 字段过滤掉其中一个。问题不是过滤掉具有相同_id 的那个，而是过滤掉所有内容。

下面是我的代码——我还控制台记录每个步骤，这样我们就可以看到发生了什么

在我的 NUXTJS 方法中

        removeSingleImage(imageObjId) {
            this.$axios.delete(`/photo/${imageObjId}`)
            .then(result => {
                const olduploaded = this.uploaded
                console.log(olduploaded);
                const newUploaded = olduploaded.filter((item) => {
                    console.log("item._id", item._id);
                    console.log("imageObjId", imageObjId);
                    item._id !== imageObjId
                })
                this.uploaded = newUploaded
                console.log(newUploaded);
            })
            .catch(e => {
                console.log(e);
            })
        }

当此代码 console.log(olduploaded); 运行时，在控制台中我得到预期的数组，如下所示

[
                {
                    "_id":"60de4a29e2c2850015c4dd78",
                    "location":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuIbd-D80_YPHKNJnLFuO2bHqk5NfNIna7ZQ&usqp=CAU",
                    "owner":"60dce43551e7df0015bd0b65",
                    "place":"60de48e3e2c2850015c4dd75",
                    "createdAt":"2021-07-01T23:05:13.264Z",
                    "updatedAt":"2021-07-01T23:05:13.264Z",
                    "__v":0},
                {
                    "_id":"60e3ad33804ed4001542ad7b",
                    "location":"https://images.unsplash.com/photo-1472224371017-08207f84aaae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80",
                    "owner":"60dce43551e7df0015bd0b65",
                    "place":"60de48e3e2c2850015c4dd75",
                    "createdAt":"2021-07-06T01:09:07.716Z",
                    "updatedAt":"2021-07-06T01:09:07.716Z",
                    "__v":0},
                {
                    "_id":"60faa55763da2f0015c19941","key":"photos/QtIQk0WanlWsaeB8w6agYSaHKnUuUb.webp",
                    "location":"https://lookaam.s3-eu-west-2.amazonaws.com/photos/QtIQk0WanlWsaeB8w6agYSaHKnUuUb.webp",
                    "owner":"60dce43551e7df0015bd0b65",
                    "place":"60de48e3e2c2850015c4dd75",
                    "createdAt":"2021-07-23T11:17:43.359Z",
                    "updatedAt":"2021-07-23T11:17:43.359Z",
                    "__v":0},
                {
                    "_id":"60faa55863da2f0015c19942","key":"photos/MnacW4UFUWa0kyVjOX5cPBZxYBGLCs.webp",
                    "location":"https://lookaam.s3-eu-west-2.amazonaws.com/photos/MnacW4UFUWa0kyVjOX5cPBZxYBGLCs.webp",
                    "owner":"60dce43551e7df0015bd0b65",
                    "place":"60de48e3e2c2850015c4dd75",
                    "createdAt":"2021-07-23T11:17:44.005Z",
                    "updatedAt":"2021-07-23T11:17:44.005Z",
                    "__v":0}
]

当我 console.log("item._id", item._id); 和 console.log("imageObjId", imageObjId); 为每个项目时，我得到

item._id 60de4a29e2c2850015c4dd78
imageObjId 60faa55863da2f0015c19942
item._id 60e3ad33804ed4001542ad7b
imageObjId 60faa55863da2f0015c19942
item._id 60faa55763da2f0015c19941
imageObjId 60faa55863da2f0015c19942
item._id 60faa55863da2f0015c19942
imageObjId 60faa55863da2f0015c19942

我们可以看到最后一个 item._id 和 imageObjId 是相同的，应该被过滤掉，但是当我过滤掉它们并运行 console.log(newUploaded) 时，我得到的是一个空数组

[]

【问题讨论】：

标签： javascript node.js mongodb vue.js nuxt.js

【解决方案1】：

您在过滤器回调中缺少return：

            const newUploaded = olduploaded.filter((item) => {
                console.log("item._id", item._id);
                console.log("imageObjId", imageObjId);
                return item._id !== imageObjId
                //?
            })

【讨论】：