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

Question

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

我了解到实体是一个对象，因此它不会保持顺序。我也明白我必须使用结果数组，因为它有原始顺序的 ID。我的问题是如何在我的 React 组件中使用这个结果数组来按原始顺序显示帖子？

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

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 return 正在处理一个数组，而你正在对数组进行排序，我认为问题出在其他地方。

Answer 3

非常感谢。然而...

我刚刚发现 sort 方法在我的渲染中不是必需的，因为我正在使用 normalizr，它已经有一个包含所有 post 的结果数组正确按 ID 排序，而显然所有 post 数据都在实体对象中。

所以我设法通过 normalizr 结果数组进行映射，该数组包含每个 post 的所有键 ID，然后 return 一个新对象，每个 post 在实体对象中排序通过其各自的密钥 ID。

像这样...

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

这会以正确的顺序获取所有 post，因为我正在通过已经排序的结果数组进行映射。

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

How can I use the result array in my normalized state to render posts in sorted order