如何处理功能组件错误？

Question

该组件在进程中接受一个字符串，并尝试将其转换为正则表达式。

function ControlString(props) {
    const regExp = new RegExp(props.template, "g");
    ...
}

为每个输入字符调用更新，因此如果在父级中尝试输入'\ d'，则构造函数将在单条斜线上生成错误

在函数中，componentDidCatch不起作用。如何在不将整个组件转换为类的情况下处理此异常？

Answer 1

您可以添加一个“验证” RegExp的功能：

const isValidRegExp = (regExp) => {
    try {
        new RegExp(regExp);
        return true;
    } catch(e) {
        return false;
    }
}

在组件顶部，您调用该函数并在RegExp无效的情况下提前退出：

function ControlString(props) {
    if(!isValidRegExp(props.template)) {
        return null;
    }
}