[英]ReactJS callback useEffect hook
通过遵循 GetStreamIO 服务的文档,我试图在用户连接到频道时隐藏频道消息,以便不会向用户显示之前的消息历史记录。
const App = () => {
const [chatClient, setChatClient] = useState(null);
const [channel, setChannel] = useState(null);
useEffect(() => {
const initChat = async () => {
const client = StreamChat.getInstance(env.API_KEY);
const _channel = await client.channel('livestream', env.ROOM_NAME);
setChatClient(client);
setChannel(_channel)
};
initChat();
}, []);
useEffect(() => {
const hideChat = async () => {
if(channel !== null) {
console.log(channel);
await channel.hide();
}
}
hideChat();
}, [channel])
return (
<Chat client={chatClient}>
<Channel channel={channel}>
<Window>
<VirtualizedMessageList />
</Window>
</Channel>
</Chat>
);
};
export default App;
在更新channel
的 state 值后,我将通过channel.hide()
方法隐藏消息,但是此行会引发Uncaught (in promise) TypeError: Cannot read property 'hide' of null
setChatClient
function 是异步的。 可能当channel.hide()
运行时,通道值为 null。 我建议您在值发生变化时隐藏通道:
useEffect(() => {
if(channel) channel.hide();
}, [channel]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.