如何在 React 中对组件进行排序？答案

【问题标题】：How can I sort a component in React?如何在 React 中对组件进行排序？
【发布时间】：2021-03-07 01:11:28
【问题描述】：

我有一个要在页面中导入的组件，我正在创建一个按选项排序。

我使用 .map 作为组件。比如：

{data.posts.map((post) => (
        <Box>
          <Heading>{post.title}</Heading>
          <Box>{post.content}</Box>
        </Box>
))}

然后我导入该组件：

<Posts data={data} />

现在我尝试按照使用 .reverse() 的方式做一些事情

我使用 useState 并在升序和降序之间切换，然后将其附加到帖子。

<Posts data={data} sortBy={order} />

在组件内部：

{sortBy === "ascending"
        ? data.posts.map((post) => (
            <Box>
              <Heading>{post.title}</Heading>
              <Box>{post.content}</Box>
            </Box>
          ))
        : data.posts.reverse().map((post) => (
            <Box>
              <Heading>{post.title}</Heading>
              <Box>{post.content}</Box>
            </Box>
          ))}

默认设置为升序，它显示正常，当我按降序排序时它可以工作，但如果我尝试重新排序为升序，它不会做任何事情。它仍然处于下降状态。只有当我再次单击下降时，它才会恢复正常。所以升序非常适合第一次加载页面，然后我必须使用降序在订单之间切换。

现在我本可以使用它，最初加载升序，然后使用反向进行升序和降序，但我有一个暗/亮模式按钮触发器，当单击它时，由于状态的变化，它也会触发订单.

我希望避免再次调用 API 并通过调用应用排序，但这真的是唯一的选择吗？

【问题讨论】：

reverse 函数就地修改（修改原始列表）。一种选择是克隆然后反转，例如[...data.posts].reverse().map()。或者每次 sortBy 更改时重新排序列表，并简单地按原样显示列表（排序后）。
或者，使用.sort() 并传入一个回调，按照您的需要对元素进行排序。

标签： javascript reactjs

【解决方案1】：

reverse 函数在原地修改列表（它修改了原始列表）。因为您没有撤消该反转，所以它保持反转。

一种选择是浅拷贝/克隆列表，然后将其反转：

[...data.posts].reverse().map(post => { })

或者您可以在每次sortBy 更改时重新排序列表，并简单地按原样显示列表（排序后）。

【讨论】：