如何在标准化状态下使用结果数组以排序顺序呈现帖子

Posted 2023-02-22

【中文标题】如何在标准化状态下使用结果数组以排序顺序呈现帖子

【英文标题】：How can I use the result array in my normalized state to render posts in sorted order

【发布时间】：2019-02-04 12:13:54

【问题描述】：

我已在我的 react 应用程序中成功使用 normalizr 来规范化我的 API 响应。在我的状态下，我有实体和结果数组。我正在使用实体在我的反应组件中呈现帖子，但它们不是原始顺序。

我知道实体是一个对象，因此它不会保持顺序。我也明白我必须使用结果数组，因为它具有原始顺序的 id。我的问题是如何在我的反应组件中使用这个结果数组以原始顺序显示帖子？

我已经通过堆栈+谷歌搜索，我似乎没有找到解决我问题的具体答案。在将实体对象映射到渲染中之前，我还尝试进行排序，如下所示：

Object.values(posts).sort((a, b) => a.created_on > b.created_on)

或

Object.values(posts).sort((a, b) => a.created_on + b.created_on)

或

Object.values(posts).sort((a, b) => a.created_on - b.created_on)

然后使用地图。但所有这些都不起作用。

有没有不使用 denormalizr 的特定方法？

提前致谢。

【参考方案1】：

也许您没有正确调用排序？这似乎有效：

const sorter = (a, b) => 
  return a < b;


let posts = [4, 5, 7, 1]
posts.sort(sorter).map(i => console.log(i))

【参考方案2】：

我们可能需要更多信息，因为我相信它应该可以工作。以下函数对数组进行排序，并在 react render return 语句中按升序呈现。

array.sort((a, b) => a.created_on > b.created_on).map((item) => 
      return (
        <div>item.name</div>
      )

说它不起作用，你的意思是帖子通过地图呈现但没有排序？帖子根本不呈现？我没有使用 normalizr 但如果 normalizr 返回一个数组并且您正在对数组执行排序，我认为问题出在其他地方。

【讨论】：

嗨，韦斯。是的，帖子通过地图呈现，但未排序。使用您指定的排序只是奇怪地重新排列顺序，但不是从 API 中的实际排序。我相信您提到的那种确实应该有效，但在这种情况下，我猜这不是由于 normalizr 本身。因此，这可能是您所指的“其他地方”。我会再挖一点。但如果你想到别的，请告诉我。谢谢。

【参考方案3】：

非常感谢。不过……

我刚刚发现我的渲染中不需要排序方法，因为我使用的是 normalizr，它已经有一个按 正确 顺序排列的所有帖子的结果数组他们的 ID，而显然所有帖子数据都在实体对象中。

所以我设法通过包含每个帖子的所有键 id 的 normalizr 结果数组进行映射，然后返回一个新对象，其中实体对象中的每个帖子都按其各自的键 id 排序。

这样……

resultArray.map(post => postEntities[post]);

这会以正确的顺序获取所有帖子，因为我正在映射已排序的结果数组。

顺便说一句，我为此使用了选择器。所以上面的代码不在渲染组件中，而是在 selectors.js 中