Tengo un Profile de componente que podría recibir este apoyo:

 RootProfile.propTypes = { route: PropTypes.shape({ params: PropTypes.shape({ userData: PropTypes.oneOfType([ PropTypes.shape({ id: PropTypes.string.isRequired, }), PropTypes.shape({ username: PropTypes.string.isRequired, }), ]), }), }).isRequired, };

En el código de Profile , hago:

 function RootProfile({route: { params }}){ const currentUser = useCurrentUser(); let { userData = currentUser.data } = params ?? {}; // Consume the most up-to-date data from context userData = useUpdatedUserData(userData); if (userData.id) { return <Profile userData={userData} /> } // We will need to fetch the user by username! return <ProfileFetcher username={userData.username} /> }

Como puede ver, si userData.id no está definido, no renderizo mi componente de Profile de carga diferida... En su lugar, renderizo mi componente ProfileFetcher , que solo obtiene los datos del usuario por nombre de usuario y los almacena en mi contexto (que Consumo en RootProfile para volver a renderizar la pantalla cuando todo esté listo).

Mi pregunta es: ¿qué pasa si, por una razón inesperada, el Profile no recibe los campos de apoyo "requeridos" para su trabajo? Quiero decir, ¿qué pasa si no recibe ni userData.id ni userData.username?

¿Debería hacer algo como

 function RootProfile({route: { params }}){ const currentUser = useCurrentUser(); let { userData = currentUser.data } = params ?? {}; // Consume the most up-to-date data from context userData = useUpdatedUserData(userData); if (userData.id) { return <Profile userData={userData} /> } else if (userData.username) { // We will need to fetch the user by username! return <ProfileFetcher username={userData.username} /> } else { throw new Error("id or username is required"); } }

?? Quiero decir, ¿se considera "correcto" arrojar un error dentro de un componente React?

O, ¿deberían manejarse todas estas situaciones con ErrorBoundaries y PropTypes ?