Javascript映射集合

问题：

const options = this.props.itemIds.map((id) => (
  <Option key={this.props.itemSearchList[id].id}>
     {this.props.itemSearchList[id].name}
  </Option>
));

const items = [
  {
    id: 0,
    name: "name 0",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
  {
    id: 1,
    name: "name 1",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
  {
    id: 2,
    name: "Name 2",
    tags: ['#sports', '#outdoor', '#clothing'],
  },

const newItems = [
  0: {
    id: 0,
    name: "name here",
  },
  1: {
    id: 1,
    name: "name here",
  },
]

我正在尝试构建一个简单的搜索工具。它通过将一个id与另一个具有相同id的项目进行匹配来返回搜索查询。在不涉及复杂性的情况下，我遇到的问题是，在以前组织数据时，javascript的map函数完美地返回了所有结果。然而，现在我的数据结构有点不同了（我想是一个集合？）。ID似乎没有对齐，这会导致显示错误的搜索结果

所讨论的函数：

const options = this.props.itemIds.map((id) => (
  <Option key={this.props.itemSearchList[id].id}>
     {this.props.itemSearchList[id].name}
  </Option>
));

const items = [
  {
    id: 0,
    name: "name 0",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
  {
    id: 1,
    name: "name 1",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
  {
    id: 2,
    name: "Name 2",
    tags: ['#sports', '#outdoor', '#clothing'],
  },

const newItems = [
  0: {
    id: 0,
    name: "name here",
  },
  1: {
    id: 1,
    name: "name here",
  },
]

既然数据是一个集合，map函数就不能像预期的那样工作，它会返回不正确的结果，或者根本不会返回结果：过去我已经成功地在这个结构上使用了lodash map函数

以下是新数据的屏幕截图：

const options = this.props.itemIds.map((id) => (
  <Option key={this.props.itemSearchList[id].id}>
     {this.props.itemSearchList[id].name}
  </Option>
));

const items = [
  {
    id: 0,
    name: "name 0",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
  {
    id: 1,
    name: "name 1",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
  {
    id: 2,
    name: "Name 2",
    tags: ['#sports', '#outdoor', '#clothing'],
  },

const newItems = [
  0: {
    id: 0,
    name: "name here",
  },
  1: {
    id: 1,
    name: "name here",
  },
]

我认为写出这个例子的一个有代表性的方式是：

const options = this.props.itemIds.map((id) => (
  <Option key={this.props.itemSearchList[id].id}>
     {this.props.itemSearchList[id].name}
  </Option>
));

const items = [
  {
    id: 0,
    name: "name 0",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
  {
    id: 1,
    name: "name 1",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
  {
    id: 2,
    name: "Name 2",
    tags: ['#sports', '#outdoor', '#clothing'],
  },

const newItems = [
  0: {
    id: 0,
    name: "name here",
  },
  1: {
    id: 1,
    name: "name here",
  },
]

有什么建议可以让这项工作顺利进行，或者需要更多信息吗？也许我完全误解了这个问题，但我相信它与JS的数据结构和映射函数有关。我可以看到结果返回，但id不再正确排列

这是错位的视觉表现。橙色是搜索输入，它会得到正确的结果。绿色是由于数据结构和映射（我假设）而导致的实际显示的不一致

你所谓的“集合”和“地图”实际上是数组。现在，其中一个数组的对象正好位于数组中与id匹配的位置：

items[5].id === 5

现在，通过排序/变异/更改顺序，使位于某个位置的元素没有id：

newItems[5].id // 7 :(

这意味着您无法再轻松访问该项，您现在要么重新对数组排序以使其有序，要么搜索id为的对象：

newItems.find(item => item.id === 5) // { id: 5, ... }

或者切换到一些未排序的集合，如真实的

地图
：

const itemsMap = new Map(newItems.map(item => ([item.id, item])));

因此，您可以获得id为的特定项目：

itemsMap.get(5) // { id: 5, ... }

。。。但是这一切与数组、原型、映射根本没有关系。
问题是你使用了索引，并将其与id作为一种伪密钥排列在一起，这种伪密钥……非常脆弱。您应该做的是按id键控（表示
项
应该是一个对象），然后使用一个单独的数组存储所需的顺序。因此，
项
将是一个由id键控的对象：

const items = {
  1: {
    id: 1,
    name: "name 1",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
  2: {
    id: 2,
    name: "name 2",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
  9: {
    id: 9,
    name: "Name 9",
    tags: ['#sports', '#outdoor', '#clothing'],
  },
};

然后，
itemIds
（看起来您已经有了）是一个顺序正确的数组：

const itemIds = [1,9,2];

然后，通过在该数组上循环并通过所述键获取元素，可以按正确的顺序访问它们：

itemIds.map((id) => {
  const item = items[id];
  // do something with the item
}


看看Redux如何建议规范化状态形状

以下是我的简单解决方案：

const options = [];
    this.props.itemList.forEach((item) => {
      if (this.props.searchResults.includes(item.id)) {
        options.push(<Option key={item.id}>{item.name}</Option>);
      }
    });

const options=[]；
this.props.itemList.forEach（（项）=>{
if（this.props.searchResults.includes（item.id））{
options.push（{item.name}）；
}
});

让我知道你的想法（对那些试图提供帮助的小组！）
你的
newItems
示例不起作用。你不能在JavaScript中有一个键值对数组。在newItems之后，你不是要使用
[
而是要使用
{
吗？@charlie可能造成了整个混乱，因为OP向我们提供了他的控制台显示的内容，这不是有效的JSON（但在我看来，人们仍然可以理解它）我认为混淆之处在于，你在webtools中看到这些数字，并假设它是一个不同的形状，由数字或其他东西键入。事实并非如此。这只是你浏览器友好的方式来显示每个元素的索引，但它仍然是项的完全相同的数组。错误解释“新数据的屏幕截图”。这是一个对象数组。它正在显示，标记单个数组元素及其数组索引。这本身不是结构的一部分。而且，[1]显示“id”，而其他不显示，因此我想知道对象的成员是否一致。