javascript - react : Check if key is unique

Question

在 react 中，我想知道是否有一种方法可以测试 react 键是否唯一。我有一系列正在显示的相册，它们是从 mongodb 中提取的。数据库的设置方式，数据库可以包含重复的条目，是的，它必须是这样的，不，我不是在寻找一种方法来删除数据库查询中的重复项。希望在 react 中做到这一点。

当您向下滚动页面时，客户端一次从数据库加载 20 个结果，并在您继续滚动时根据用户生成的查询获取接下来的 20 个结果。最终，您会遇到这些重复项，并且 React 会生成一个唯一键警告，因为唯一键是一个 ID 字符串。

this.props.data.map( album => {
  album.cover = (album.images[0]) ? album.images[0].url : null

  return <Album data={album} key={album.sid} />
})

我想知道是否有一种方法可以根据已经呈现的 react 键测试 album.sid 属性，如果已经呈现了键，则不要渲染组件并移动到下一个组件。

Answer 1

您可以在 action creator(或者如果您不使用 Redux，则返回 API 调用结果的位置)、reducer 中过滤重复项，或者如果您仍想将其保留在 Redux 中，则可以在组件中过滤重复项出于任何原因陈述。

复杂度为 O(n) 的重复过滤算法为:

const seen = new Set();
const uniqueData = data.filter(({ sid }) => {
  if (seen.has(sid)) {
    return false;
  }
  seen.add(sid);
  return true;
});

如果您决定在组件级别执行此操作，您可能需要考虑使用一些 memoization library这样只有在组件重新呈现时 data 发生更改时才会重新计算过滤。