Javascript 反应：检查密钥是否唯一

在react中，我想知道是否有一种方法可以测试react键是否唯一。我有一系列我正在展示的专辑，它们来自mongodb。数据库的设置方式，数据库可以包含重复的条目，是的，必须是这样，不，我不想在数据库查询中删除重复项。希望在react中实现这一点

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

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

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

this.props.data.map（相册=>{
album.cover=（album.images[0]）？album.images[0]。url:null
返回
})

---

我想知道是否有方法针对已渲染的react键测试

album.sid

属性，如果该键已渲染，则不渲染组件并移动到下一个组件。

您可以在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;
});

---

如果您决定在组件级别执行此操作，您可能需要考虑使用一些，以便在组件重新渲染时“<代码>数据< /代码>发生更改时，仅重新计算筛选。

< p>从我（删除）关于ReDux:

的注释中回答此评论。 但是reducer如何根据传入的结果检查已经加载的结果呢？您能用一个模拟示例发布一个答案吗

使用哈希表：

const DEFAULT_STATE = {
  byId: [],
  byHash: {}
}

export default function (state = DEFAULT_STATE, action) {
  switch (action.type) {
    case GET_ALBUM:
      return {
        ...state,
        byId: state.byId.includes(action.payload.id)
          ? [ ...state.byId ]
          : [ ...state.byId, action.payload.id ],
        byHash: {
          ...state.byHash,
          [action.payload.id]: action.payload
        }
      }

    default:
      return state
  }
}

您的组件：

this.props.albumIds.map( id => {
  let album = this.props.albums[id]
  album.cover = (album.images[0]) ? album.images[0].url : null

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

---

我希望不要集成redux（overkill）但是老实说，如果它能解决这个问题，我会这么做的。但是减速器会如何检查已经加载的结果和传入的结果？你能用一个模拟的例子给出一个答案吗？你不一定需要Redux。据我所知，你不能得到组件的键，这是React本身要使用的一个内部属性。不确定你是怎么做到的正在添加新结果，但如果要将它们附加到父级中的列表中，则只需添加一个简单的条件附加，而不是同时附加20个新结果。例如，对于新的20个结果中的每一个，循环查看现有结果，看它是否已经存在。如果是，则继续下一个新结果，而不附加它。这是太好了！我只是粗略地将它集成到我的循环中，它正是我所需要的。非常感谢。

{
   albumIds: state.albums.byId,
   albums: state.albums.byHash
}