diff --git a/src/components/app/ErrorBoundary/index.tsx b/src/components/app/ErrorBoundary/index.tsx index 0d88d70c0..35f57d97a 100644 --- 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 [k: string]: any }> { state: any = { @@ -24,7 +25,17 @@ export class ErrorBoundary extends Component<{ const { children, ...restProps } = this.props if (errorInfo) { - return
渲染报错
+ return ( + // @ts-ignore + this.props.FallbackComponent ? ( + createElement(this.props.FallbackComponent, { + error: errorInfo.error, + errorInfo, + }) + ) : ( +
渲染报错
+ ) + ) } // @ts-ignore diff --git a/src/components/universal/Markdown/index.tsx b/src/components/universal/Markdown/index.tsx index c7a666dff..1d256c7a8 100644 --- 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 = memo((props) => { rest, ]) + const RenderError = useCallback( + () => ( +
+ Markdown RenderError, Raw:
{value || props.children} +
+ ), + [props.children, value], + ) + return ( -
- {className ?
{node}
: node} + +
+ {className ?
{node}
: node} - {props.toc && } -
+ {props.toc && } +
+ ) }) diff --git a/src/components/widgets/Player/index.tsx b/src/components/widgets/Player/index.tsx index 668fe4b20..d3e38ea11 100644 --- 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 index 46c167bfe..87f1514a3 100644 --- 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 }, [])