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返回一个数组并且您正在对该数组执行排序，那么我认为问题可能出在其他地方。

Answer 3

非常感谢。但是...

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

因此，我设法遍历了normalizr结果数组，该数组保存每个帖子的所有键ID，然后按其各自的键ID返回实体对象中的每个帖子。

就这样...

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

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

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

中