fix(message): prevent dom not match between SSR and CSR

Yoctol · Apr 8, 2021 · 850895b · 850895b
1 parent bb701aa
commit 850895b
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/src/message/HooksMessage.tsx b/src/message/HooksMessage.tsx
@@ -76,11 +76,16 @@ interface HooksMessageProps {
 }
 
 const HooksMessage: FC<HooksMessageProps> = ({ setTrigger }) => {
+  const [mounted, setMounted] = useState(false);
   const refMap = useRef(new WeakMap());
   const cancelMap = useRef(new WeakMap());
   const [messages, setMessages] = useState<Message[]>([]);
   const getUid = useUID();
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   const trigger = useCallback(
     ({ content, duration }: MessageOptions, type: StatusType) => {
       return new Promise<boolean>((resolve) => {
@@ -137,6 +142,10 @@ const HooksMessage: FC<HooksMessageProps> = ({ setTrigger }) => {
     config,
   });
 
+  if (!mounted) {
+    return null;
+  }
+
   return (
     <Portal defaultOrder={StackingOrder.MESSAGE}>
       <MessageContainer>