Как я могу предотвратить сбою всего приложения React, когда производится неверный компонент? ⇐ Javascript

[Anonymous]

У меня есть приложение React, где у меня есть основной компонент Entireapp, который делает дочерний компонент Foo. Компонент FOO условно производит либо стержень, либо баз на основе своей иконидной опоры. Однако, когда иконид передается в FOO, является недействительной (например, что-то вроде «FOZ», отправленного с сервера), все приложение сбоятся, показывая «ошибку приложения: исключение на стороне клиента произошла» в браузере с пустым экраном.const Bar = () => Bar;
const Baz = () => Baz;

const Foo = ({ iconId }) => {
const components = [
{ icon: 'Bar', iconId: 'bar', component: Bar },
{ icon: 'Baz', iconId: 'baz', component: Baz },
];

const iconData = components.find(c => c.iconId === iconId);

/// @ts-ignore // intentionally ignore type to illustrate the issue
const ComponentToRender:(() => React.JSX.Element) = iconData?.component;
return ;
};

const EntireApp = () => {
return (

Something more important and healthy component
{/* Invalid iconId that should not crash the entire app */}

);
};
< /code>
Как я могу помешать сбою всего приложения React, когда визуализируется недопустимый компонент? /> и пустая страница в Prod. Меня не волнует, что разбивается икона. Как сказать React: < /p>

Эй, если один компонент недействителен, не уничтожайте все мое приложение. Только не визуализируйте этот сломанный компонент? Следующая ошибка приложения.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... omponent-i