fix: fix some thing

Signed-off-by: Innei <tukon479@gmail.com>
mx-space · Aug 17, 2022 · 3b7b173 · 3b7b173
1 parent 902184d
commit 3b7b173
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 24 deletions.
diff --git a/src/components/app/ErrorBoundary/index.tsx b/src/components/app/ErrorBoundary/index.tsx
@@ -1,7 +1,8 @@
-import React, { Component } from 'react'
+import React, { PureComponent, createElement } from 'react'
 
-export class ErrorBoundary extends Component<{
+export class ErrorBoundary extends PureComponent<{
   children: React.ReactNode
+  FallbackComponent?: React.ComponentType<any>
   [k: string]: any
 }> {
   state: any = {
@@ -24,7 +25,17 @@ export class ErrorBoundary extends Component<{
     const { children, ...restProps } = this.props
 
     if (errorInfo) {
-      return <div>渲染报错</div>
+      return (
+        // @ts-ignore
+        this.props.FallbackComponent ? (
+          createElement(this.props.FallbackComponent, {
+            error: errorInfo.error,
+            errorInfo,
+          })
+        ) : (
+          <div>渲染报错</div>
+        )
+      )
     }
 
     // @ts-ignore

diff --git a/src/components/universal/Markdown/index.tsx b/src/components/universal/Markdown/index.tsx
@@ -8,12 +8,14 @@ import type { FC } from 'react'
 import React, {
   Fragment,
   memo,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
 
+import { ErrorBoundary } from '~/components/app/ErrorBoundary'
 import type { TocProps } from '~/components/widgets/Toc'
 import { useStore } from '~/store'
 import { isDev } from '~/utils/env'
@@ -261,22 +263,33 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options> = memo((props) => {
     rest,
   ])
 
+  const RenderError = useCallback(
+    () => (
+      <div>
+        Markdown RenderError, Raw: <br /> {value || props.children}
+      </div>
+    ),
+    [props.children, value],
+  )
+
   return (
-    <div
-      id="write"
-      style={style}
-      {...wrapperProps}
-      ref={ref}
-      className={clsx(
-        styles['md'],
-        codeBlockFully ? styles['code-fully'] : undefined,
-        wrapperProps.className,
-      )}
-    >
-      {className ? <div className={className}>{node}</div> : node}
+    <ErrorBoundary FallbackComponent={RenderError}>
+      <div
+        id="write"
+        style={style}
+        {...wrapperProps}
+        ref={ref}
+        className={clsx(
+          styles['md'],
+          codeBlockFully ? styles['code-fully'] : undefined,
+          wrapperProps.className,
+        )}
+      >
+        {className ? <div className={className}>{node}</div> : node}
 
-      {props.toc && <TOC headings={headings} />}
-    </div>
+        {props.toc && <TOC headings={headings} />}
+      </div>
+    </ErrorBoundary>
   )
 })
 

diff --git a/src/components/widgets/Player/index.tsx b/src/components/widgets/Player/index.tsx
@@ -87,8 +87,11 @@ export const MusicMiniPlayer = forwardRef<
   }
 
   useEffect(() => {
+    if (cursor >= len) {
+      return
+    }
     fetchData(playlist[cursor])
-  }, [cursor, playlist])
+  }, [cursor, len, playlist])
 
   useEffect(() => {
     setCur(null)

diff --git a/src/hooks/use-header-meta.ts b/src/hooks/use-header-meta.ts
@@ -10,17 +10,21 @@ export const useHeaderMeta = (title: string, description: string) => {
   const { appStore } = useStore()
 
   useEffect(() => {
-    appStore.headerNav = {
-      title,
-      meta: description,
-      show: true,
-    }
+    runInAction(() => {
+      appStore.headerNav = {
+        title,
+        meta: description,
+        show: true,
+      }
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [description, title])
 
   useEffect(() => {
     return () => {
-      appStore.headerNav.show = false
+      runInAction(() => {
+        appStore.headerNav.show = false
+      })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])