javascript - 映射数据给出了正确的结果，但最终在 final方法中结果为未定义

Question

我有三个不同的数组。帖子、类别和标签。我想从类别和标签中获取值并将其与 Posts 数组中的 Post 合并。希望我的代码能够清楚地表明我想要实现的目标。

因此，完成所有操作后，我将返回一个包含 _.merged 数据的新数组，但所有值均未定义。我不明白我在这里做错了什么。我确信这是我犯的一个简单错误。

帖子数组

[
{
    "id": 79,
    "slug": "checkbox-code",
    "type": "post",
    "title": {
        "rendered": "Checkbox code"
    },
    "categories": [
        6
    ],
    "tags": [
        7
    ],
},
{
    "id": 77,
    "slug": "checkbox-style",
    "type": "post",
    "title": {
        "rendered": "Checkbox style"
    },
    "categories": [
        6
    ],
    "tags": [
        8
    ],
},
{
    "id": 75,
    "slug": "checkbox-usage",
    "title": {
        "rendered": "Checkbox usage"
    },
    "categories": [
        6
    ],
    "tags": [
        9
    ],
},
]

类别数组

[
{
    "id": 6,
    "name": "checkbox",
    "slug": "checkbox",
    "taxonomy": "category",
},
{
    "id": 5,
    "name": "buttons",
    "slug": "buttons",
    "taxonomy": "category"
}
]

标签数组

[
{
    "id": 7,
    "name": "code",
    "slug": "code",
    "taxonomy": "post_tag",
},
{
    "id": 8,
    "name": "style",
    "slug": "style",
    "taxonomy": "post_tag",
},
{
    "id": 9,
    "name": "usage",
    "slug": "usage",
    "taxonomy": "post_tag",
}
]

我的代码

getTagName = (id) => {
  this.tags.map(tag => {
    if(id == tag.id) {console.log('tag name ' + tag.name)}
    return id == tag.id ? tag.name : null
  })
}

getCatName = (id) => {
  this.cats.map(cat => {
    if(id == cat.id) {console.log('category name ' + cat.slug)}
    return id == cat.id ? cat.slug : null
  })
}

componentWillMount() {
  let arr = [];
  for(let i=0; i<this.posts.length; i++) {
    let tagName = this.getTagName(this.posts[i].tags[0]);
    let catName = this.getCatName(this.posts[i].categories[0]);
    let newObj = {
      "tag_name": tagName,
      "category_name": catName
    }

    _.merge(this.posts[i], newObj);
    arr.push(this.posts[i]);
  }
}

我得到什么

[
{
    "id": 79,
    "slug": "checkbox-code",
    "type": "post",
    "title": {
        "rendered": "Checkbox code"
    },
    "categories": [
        6
    ],
    "category_name": undefined,
    "tag_name": undefined,
    "tags": [
        7
    ],
},
{
    "id": 77,
    "slug": "checkbox-style",
    "type": "post",
    "title": {
        "rendered": "Checkbox style"
    },
    "categories": [
        6
    ],
    "category_name": undefined,
    "tag_name": undefined,
    "tags": [
        8
    ],
},
{
    "id": 75,
    "slug": "checkbox-usage",
    "title": {
        "rendered": "Checkbox usage"
    },
    "categories": [
        6
    ],
    "category_name": undefined,
    "tag_name": undefined,
    "tags": [
        9
    ],
},
]

当我在 getCatName 和 getTagName 方法中记录返回值时，我得到了正确的数据。它只是没有进入到 componentWillMount。感谢您的帮助。

这是一个fiddle

Answer 1

这两个方法中的 return 语句都是从 Array.map() 方法返回的。您没有从 getTagName() 或 getCatName() 函数返回值。

请记住，如果您返回map方法的结果(即返回this.cats.map(...))，这些结果将采用数组的形式。