JavaScript映射集合

dizzy 发表于 Dev

头晕

问题：

我正在尝试构建一个简单的搜索工具。它通过将一个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'],
  },

现在，数据是一个“集合” ... map函数无法按预期运行，并且返回的结果不正确或根本不返回结果：过去，我已经能够在此结构上成功使用lodash Map函数。

这是新数据的屏幕截图：

我相信写出示例的代表性方法是：

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

有任何建议使这项工作或需要更多信息吗？也许我完全误解了这个问题，但是我认为这与JS的数据结构和map函数有关。我可以看到返回的结果，但是ID不再正确排列。

这是未对准的直观表示。橙色是搜索输入，它可以获取正确的结果。绿色是由于数据结构和映射（我认为）而导致的实际显示未对齐。

头晕

这是我的简单解决方案：

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

让我知道您的想法（向尝试提供帮助的小组！）

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。