面试题：Solid.js中错误边界如何捕获子组件错误

实现步骤：
- 创建一个自定义组件作为错误边界。
- 在该组件中使用createEffect和onCleanup来捕获错误。createEffect会在组件挂载时运行，onCleanup会在组件卸载时运行，这样可以覆盖组件生命周期的关键节点。
- 在createEffect中使用try - catch块来捕获渲染、生命周期方法以及构造函数中抛出的错误。
- 当捕获到错误时，可以进行相应的处理，比如记录错误、显示备用UI等。
代码示例：

import { createEffect, onCleanup, createSignal } from "solid-js";

const ErrorBoundary = ({ children }) => {
    const [error, setError] = createSignal(null);

    createEffect(() => {
        try {
            // 这里假设children可能会抛出错误
            children();
        } catch (e) {
            setError(e);
        }
    });

    onCleanup(() => {
        try {
            // 清理时也可能有错误，这里简单处理
        } catch (e) {
            setError(e);
        }
    });

    if (error()) {
        return <div>An error occurred: {error().message}</div>;
    }

    return children();
};

export default ErrorBoundary;

在使用时：

import { render } from "solid-js/web";
import ErrorBoundary from "./ErrorBoundary";

const App = () => {
    return (
        <ErrorBoundary>
            {/* 子组件，这里假设ChildComponent可能抛出错误 */}
            <ChildComponent />
        </ErrorBoundary>
    );
};

render(() => <App />, document.getElementById('app'));

星途面试题库

面试题：Solid.js中错误边界如何捕获子组件错误

知识考点

面试题答案