在 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
属性,如果已经呈现了键,则不要渲染组件并移动到下一个组件。
最佳答案
您可以在 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
发生更改时才会重新计算过滤。
关于javascript - react : Check if key is unique,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49951386/