ReactJS 回調使用效果掛鈎

Question

通過遵循 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

Answer 1

setChatClient function 是異步的。 可能當channel.hide()運行時，通道值為 null。 我建議您在值發生變化時隱藏通道：

useEffect(() => {
    if(channel) channel.hide();
}, [channel]);