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

Question

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

我知道实体是一个对象，因此它不会维护顺序。我也明白我必须使用结果数组，因为它具有原始顺序的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的情况下执行此操作？

提前致谢。

Answer 1

也许你没有正确地调用那种？这似乎有效：

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

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

Answer 2

我们可能需要更多信息，因为我认为它应该有效。以下函数对数组进行排序，并在react render return语句中以递增顺序呈现它。

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

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

Answer 3

非常感谢。然而...

我只是发现我的渲染中不需要sort方法，因为我使用的是normalizr，它已经按照ID的正确顺序排列了所有帖子的结果数组，而显然所有的帖子数据都在entity对象中。

所以我设法映射了normalizr结果数组，该数组包含每个帖子的所有键ID，然后通过各自的键ID返回实体对象中的每个帖子。

这个......

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

由于我正在映射已经排序的结果数组，因此以正确的顺序获取所有帖子。

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