使用冻结应用过滤器在通道冻结/解冻后更新<ChannelList />
使用冻结应用过滤器在通道冻结/解冻后更新<ChannelList />
提问于 2022-06-13 23:02:41
我正在尝试使用流react组件构建聊天前端，返回具有此结构的ChatPage组件。
<ChatConfig config={config}>
<Chat client={client} customStyles={options?.theme}>
<ChannelList
Preview={CustomChannelPreview}
filters={filters}
sort={sort}
/>
<Channel>
<Window>
<CustomChannelHeader/>
<MessageList/>
<MessageInput Input={CustomMessageInput}/>
</Window>
<Thread/>
</Channel>
</Chat>
</ChatConfig>因此，在用户冻结或解冻通道的同一页面中有通道列表和通道窗口。
react应用程序的FE能够使过滤器从window.location.search应用，以便应用的过滤器只允许用户查看冻结或解冻的通道(例如，{"frozen":{"$eq":false}, .....})。
当用户冻结或取消冻结时，是否有方法在通道更新后重新呈现通道列表以匹配更新的通道状态？
在不重新实现onChannelUpdated函数中的整个过滤策略的情况下，能够做到这一点吗？
提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-28 04:36:21
ChannelList组件接受一个key支柱。当此支柱的值发生变化时，组件将重新呈现并匹配更新的通道状态。
在这种情况下，您可以跟踪通道列表键状态：
const generateUniqueChars = () => {
// any generation strategy you want here
}
const [channelListKey, setChannelListKey] = useState(generateUniqueChars())
const updateChannelListKey = () => {
setChannelListKey(generateUniqueChars())
}然后，将密钥传递给ChannelList组件：
<ChannelList key={channelListKey} />使用function上下文或任何您喜欢的方式，您可以将updateChannelListKey函数传递给冻结/取消冻结通道的组件。当触发冻结/解冻时，您将调用update通道列表函数，该函数更新通道列表键状态，并重新呈现通道列表以匹配新的通道状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72612746
复制相关文章
相似问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
