Question

假设我们有一个包含x个数量项的对象数组。

条目的E.G

{
 name: 'someone',
 age: 22,
 modified: true
}

现在我们要过滤条目，以便我们可以使用filter方法获取包含modified = true的所有条目。过滤后，我们会将结果映射到div。

E.G：

return this.props.entries.filter((entry) => {
  return entry.modified === true;
}).map((displayedEntry, index) => {
  return (
    <tr>
      <td>{index + 1}</td>
      <td>displayedEntry.name</td>
    </tr>
  );
});

问题是显示的索引对应于已过滤的条目数量：如果修改了4个项目，则索引= [0,1,2,3]。

我的问题是如何在原始数组中传递项目的索引，而不是传递映射数组中项目的索引。

因此，如果修改了索引：5,10的项目，我可以在映射结果时传递这些索引吗？

我希望我能清楚地解释清楚。

Answer 1

如果您不想破坏原始对象，请使用投影：

    return this.props.entries
    .map((entry, index) => {
        return {
            entry: entry,
            index: index
        };
    })
    .filter((proj) => {return proj.entry.modified === true;})
    .map(proj => {
        return (
            <tr>
              <td>{proj.index + 1}</td>
              <td>proj.entry.name</td>
            </tr>
        );
    });

Answer 2

这有点难看，但你可以这样做：

return this.props.entries.
  map((entry, index) => {
    entry.displayIndex = index;
    return entry;
  }).
  filter((entry) => {
    return entry.modified === true;
  }).
  map((displayedEntry, index) => {
    return (
      <tr>
        <td>{displayedEntry.displayIndex + 1}</td>
        <td>displayedEntry.name</td>
      </tr>
    );
  });

如何在链接过滤和映射方法时获取过滤的索引

2 个答案: