Обработка контекста реакции при возникновении границы ошибки

Question

У меня есть компонент, предоставляющий контекст (= поставщик), и некоторые дочерние компоненты используют контекст.

Мой провайдер также обертывает компонент ErrorBoundary React в случае сбоя дочернего объекта. Оттуда, если происходит ошибка, компонент ErrorBoundary React обновляет некоторые значения в моем контексте.

Но похоже, что значение не обновлено, и я не знаю почему.

Вот как выглядит мой код:

const MyContext = React.createContext<{
    state: FsState;
    setState: Dispatch<SetStateAction<FsState>> | null;
}>({ state: { ...initState }, setState: null });

    const [state, setState] = useState({ ...initState });
    const handleError = (error: Error): void => {
        setState({
            ...state,
            status: {
                ...state.status,
                hasError: !!error
            }
        });
    };
    return (
        <MyContext.Provider value={{ state, setState }}>
            <ErrorBoundary
                onError={handleError}
            >
                {children}
            </ErrorBoundary>
        </MyContext.Provider>
    );

Компонент ErrorBoundary:

class ErrorBoundary extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = { error: null, errorInfo: null };
    }

    componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
        this.props.onError(error);
        this.setState({
            error,
            errorInfo
        });
    }

    render(): React.ReactNode {
        const { error, errorInfo } = this.state;
        const { children } = this.props;
        if (errorInfo) {
            return (
                <>
                    <div
                    >
                        <h1>
                            Something went wrong.
                        </h1>
                    </div>
                    <div>{children}</div>
                </>
            );
        }

        return children;
    }
}

И дочерний компонент (моего Provider + ErrorBoundary)

export const ChildElement = () => {
  const {
    state: { status },
  } = useContext(MyContext);
  if (status.hasError) {
    return <div>I crashed but I'm in safe mode</div>;
  }
  throw new Error("test test"); // trigger an error
  return <div>I'll never work</div>;
};

Я никогда не захожу внутрь if loop несмотря на то, что при отладке componentDidCatch правильно срабатывает.

Answer 1

Благодаря вашей игровой площадке @Shlang я нашел проблему.

Это действительно было нечто более глубокое. У меня есть еще один дочерний компонент сuseEffect и используя setState а также обновить некоторые другие значения.

Дело в том, что он отменял hasError:true вернуться к hasError:false потому что по какой-то асинхронной причине он был выполнен после того, как ошибка была обнаружена ErrorBoundary.

Я сделал обходной путь, переместив hasError атрибут в другом useState крючок.

Спасибо!