Как отловить исключение в JSX

Question

У меня есть объект, который возвращает значок объекта на основе имени значка. Для правильного имени значка MaterialUI функция возвращает правильный объект значка. При неправильном имени эта функция должна возвращать значок ошибки. Мой код не работает. Когда я ставлю неверное имя иконки, в браузере появляется ошибка. Как я могу поймать это исключение в JSX?

import React from 'react';
import ErrorIcon from '@material-ui/icons/Error';
import * as Icons from '@material-ui/icons';

export default function DynamicIcon({iconName}) {
    try {
        let Icon = Icons[iconName];
        return (<Icon />);
    } catch (e) {
        return (<ErrorIcon color="error" />);
    }
} 

Answer 1

Хороший пример есть на React Blog :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

Затем в JSX:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Это должно позволить избежать проверки ошибок для каждого компонента. Вы также можете обернуть все свое приложение в этот компонент.

Answer 2

Вы можете проверить, существует ли иконка, прежде чем создавать подобный элемент, без необходимости отлавливать ошибку.

export default function DynamicIcon({iconName}) {
  const Icon = Icons[iconName];
  return Icon ? <Icon /> : <ErrorIcon color="error" />;
} 

Это проверяет, является ли Icons[iconName] верным, то есть существует ли иконка с именеми возвращает элемент Icon, иначе возвращается ErrorIcon.