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

Question

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

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

Post数组

[
{
    "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 语句都是 return 来自 Array.map() 方法。您没有 return 从 getTagName() 或 getCatName() 函数中获取值。

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

Answer 2

getTagName() 和 getCatName() 函数中的 .map() 没有真正意义。如果您查找特定的条目，使用 Array.find().

是有意义的

您还需要 return 该值。我更新了你的 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 3

getTagName 和 getCatName 没有 return 任何东西，所以 tagName 和 catName 将是未定义的。

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

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

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

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

Answer 4

我认为您的问题出在您的 getTagName 和 getCatName 函数中...

首先，函数不会return在它们自己的范围之外

获取任何值

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

但请记住，map 遍历整个数组长度，因此它将 return 全尺寸数组，仅匹配某些索引，如下所示：

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

所以也许您想更改过滤器的地图，或者在 return

之前使用您的地图数据

希望对您有所帮助！

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

mapping data gives correct results but ends up as undefined in final method

javascript

arrays

for-loop

map-function