在 getDerivedStateFromError() 中我们可以期待什么错误类型？

Question

根据TypeScript 定义，类型为any，而相关方法componentDidCatch()收到类型为 的错误Error。为什么会出现这种不一致？

Answer 1

Typescript 有一个Error可以使用的全局接口。

interface Error {
    stack?: string;
}

所以你可以使用

static getDerivedStateFromError(error: Error) {
  // ...
}

componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
  // ...
}

该GetDerivedStateFromError类型显示在下面，我认为这是错误类型不应该是类型any，而且类型Error

type GetDerivedStateFromError<P, S> =
        /**
         * This lifecycle is invoked after an error has been thrown by a descendant component.
         * It receives the error that was thrown as a parameter and should return a value to update state.
         *
         * Note: its presence prevents any of the deprecated lifecycle methods from being invoked
         */
        (error: any) => Partial<S> | null;

Answer 2

当前接受的答案和 React 类型定义不正确。事实上，异常可以是任何类型（包括null、undefined、number或任何其他类型）。只需尝试从渲染函数中抛出其中一些值，看看会发生什么。如果你想完全正确，你应该使用

static getDerivedStateFromError(error: unknown) { ... }

和

componentDidCatch(error: unknown, errorInfo: React.ErrorInfo) { ... }

如有必要，请检查错误处理代码中的错误类型。例如，您可以使用

if (error instanceof Error) { ... }

检查错误是否确实是Error 对象。