我如何在React中排序组件?

Question

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

我使用。map作为组件。比如:

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

然后导入组件:

<Posts data={data} />

现在我尝试使用。reverse()

在这里我使用了useState，并在升序和降序之间切换，然后将其附加到Posts。

<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调用并通过调用应用排序，但这真的是唯一的选择吗?

Answer 1

反向函数就地修改列表(它修改原始列表)。因为你没有撤销的反转，它保持反转。

一个选项是浅层复制/克隆列表，然后反向:

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

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