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方法的结果（即return this.cats.map(...)），那么这些结果将采用数组的形式。

Answer 2

getTagName和getCatName不会返回任何内容，因此tagName和catName将不会被定义。

return中的getTagName语句属于您传递给map（tag => {}）的函数。它不会使外部函数（id => {}）返回。

看起来您希望它像for循环一样工作，return会提前停止循环并返回tag.name。 map不能像那样工作，它总是迭代整个数组，并返回一个长度相同的新数组。如果您将一个return语句添加到getTagName并调用getTagName(8)，那么您将获得[ null, 'style', null ] - 这是数组中每个项目的内部函数的结果。

您要使用的方法是Array.find。

getTagName = id => {
    return this.tags.find( tag => tag.id === id ).name;
}

Answer 3

getTagName（）和getCatName（）函数中的.map（）实际上没有意义。如果您查找特定的条目，则使用Array.find（）。

是有意义的

您还需要返回该值。我更新了你的jsfiddle。 https://jsfiddle.net/3pLj20nd/14/

getTagName = (id) => {
    return tags.find(tag => {
      return id == tag.id;
    })
}

getCatName = (id) => {
    return cats.find(cat => {
      return id == cat.id;
    })
}

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

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

    console.log(arr);
}

componentWillMount();

Answer 4

我认为你的问题出在你的getTagName＆amp; getCatName函数......

首先，函数不会从它们自己的范围中返回任何值

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

但请记住，map遍历所有数组长度，因此它将返回完整大小的数组，仅在某些索引上匹配，如下所示：

tag_name: (3) […] 0: "code", 1: null, 2: null, length: 3

因此，您可能希望更改过滤器的地图，或在返回

之前使用映射数据

希望它有所帮助！

映射数据给出了正确的结果，但在最终方法

4 个答案: