Как обработать ошибку функционального компонента в React 16.8?

Question

[Snelsi]

Компонент принимает в пропсах строку и пытается преобразовать её в регулярное выражение.

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

Апдейт вызывается на каждый вводимый символ, так что если в родителе попытаться ввести '\d', конструктор выдаст ошибку на единичную косую линию.

В функциях не работает componentDidCatch. Как можно обработать это исключение, не переводя весь компонент в класс?

Answer 1

[Snelsi]

Ошибку всё таки легче обрабатывать не в потомке, а в родителе.
Решение свелось к следующему:

const [input, setInput] = useState("");
const [expression, setExpression] = useState("");

const updateInput = e => {
  setInput(e.target.value);
  try {
    new RegExp(e.target.value, "g");
    setExpression(e.target.value);
  } catch (e) {
    setExpression(".^");
  }
};

return (
  <input onChange={updateInput} />
  <ControlString template={expression} />
);

Answer 2

[Владимир Проскурин]

Вообще, есть предохранители. Но вы можете обработать ошибку при вызове конструктора RegExp через try-catch,

Comments

[Snelsi]

Да, действительно.

function ControlString(props) {
  let regExp;
  try {
    regExp = new RegExp(props.template, "g");
  } catch(e) {
    regExp = null;
  }
...

Вообще, наверно, легче такую проверку делать в рендере родителя. Меньше работы конструктору.

[myaca]

Блин, какая жесть этот перевод - "предохранители"...

Error boundary звучит ну в миллионы раз лучше