fix: fix emoji render problem if not found

client/web/src/components/Emoji/Emoji.tsx

@@ -14,7 +14,7 @@ interface Props {
 export const Emoji: React.FC<Props> = React.memo((props) => {
   const code = props.emoji.startsWith(':') ? props.emoji : `:${props.emoji}:`; // 对旧版兼容
 
-  const { emojiSkin } = useMemo(() => {
+  return useMemo(() => {
     let id = '';
     let skin = 0;
     const matches = code.match(SearchIndex.SHORTCODES_REGEX);
@@ -29,22 +29,27 @@ export const Emoji: React.FC<Props> = React.memo((props) => {
 
     // @ts-ignore
     const emoji = SearchIndex.get(id);
-    const emojiSkin = emoji.skins[skin - 1] || emoji.skins[0];
+    if (!emoji) {
+      // not found emoji
+      return <span />;
+    }
 
-    return {
+    const emojiSkin = emoji.skins[skin - 1] || emoji.skins[0];
-      emojiSkin,
-    };
-  }, [code]);
 
     return (
-    <span className="emoji-mart-emoji align-middle" data-emoji-set={'twitter'}>
+      <span
+        className="emoji-mart-emoji align-middle"
+        data-emoji-set={'twitter'}
+      >
         <span
           style={{
             display: 'block',
             width: props.size ?? '16px',
             height: props.size ?? '16px',
             backgroundImage: `url(${spritesUrl})`,
-          backgroundSize: `${100 * Data.sheet.cols}% ${100 * Data.sheet.rows}%`,
+            backgroundSize: `${100 * Data.sheet.cols}% ${
+              100 * Data.sheet.rows
+            }%`,
             backgroundPosition: `${
               (100 / (Data.sheet.cols - 1)) * emojiSkin.x
             }% ${(100 / (Data.sheet.rows - 1)) * emojiSkin.y}%`,
@@ -52,5 +57,6 @@ export const Emoji: React.FC<Props> = React.memo((props) => {
         />
       </span>
     );
+  }, [code]);
 });
 Emoji.displayName = 'Emoji';