typescript 使用每个原子中的属性对atomFamily中的反冲原子进行排序

wpx232ag 于 2023-11-20 发布在 TypeScript

关注(0)|答案(1)|浏览(147)

我现在有两个状态变量定义如下：

export const chatsAtom = atomFamily<Chat, string>({
    key: 'chatsAtom',
    default: undefined
})

export const chatIdsAtom = atom<string[]>({
    key: 'chatIdsAtom',
    default: []
})

字符串
我使用useRecoilCallback()来添加和更新值：

const addChat = useRecoilCallback(
    ({set}) =>
    (chat:Chat) => {
        set(chatsAtom(chat.id), chat)
        set(chatIdsAtom, prev => [...prev, chat.id])
    }
)

型
将聊天存储在普通的atom中意味着我可以使用setState(prev => [...prev].sort())进行排序
我的问题是，既然useRecoilCallback()没有暴露get方法，我如何使用atomFamily和聊天ID实现类似的东西？
更具体地说，我希望能够排序最近活跃的聊天到我的聊天列表的顶部。这意味着按最近的时间戳排序。

typescript

来源：https://stackoverflow.com/questions/77283958/sort-recoil-atoms-in-atomfamily-using-properties-in-each-one

1条答案

按热度按时间

bq3bfh9z1#

为了实现这一点，直接在useRecoilCallback()函数中实现它是很有挑战性的，因为useRecoilCallback()没有公开get方法。但是，有一种替代方法可以代替在useRecoilCallback()中直接实现。
最简单的方法是创建一个新的原子，其中包含对聊天列表进行排序所需的信息，而不是使用chatsAtom管理聊天。通过创建一个新的原子并在其中执行排序和过滤，您可以实现所需的功能。

export const sortedChatsAtom = selector({
  key: 'sortedChatsAtom',
  get: ({ get }) => {
    const chatIds = get(chatIdsAtom);
    const sortedChats = chatIds.map(id => get(chatsAtom(id))).sort((a, b) => b.timestamp - a.timestamp);
    return sortedChats;
  }
});

字符串
在上面的代码中，使用了一个选择器来创建sortedChatsAtom。这个原子从chatIdsAtom中检索聊天ID，从chatsAtom中获取每个聊天，并根据最新的时间戳返回一个排序列表。
通过使用useRecoilValue(sortedChatsAtom)，您可以轻松访问排序的聊天列表。

赞(0）回复(0）举报 2023-11-20

我来回答

typescript 使用每个原子中的属性对atomFamily中的反冲原子进行排序

1条答案

相关问题

热门标签

最新问答