Catch
Die Übersetzung dieser Seite fehlt oder ist veraltet, daher wird sie auf Englisch angezeigt. Auf Englisch lesen
Replace failing child content with a recovery UI. Use it around independently recoverable sections.
Retry a failed profile load
import { Button, Catch, Text, VStack, resource } from 'kuito';
function Profile() {
const user = resource(async () => {
const response = await fetch('https://example.com/me');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return (await response.json()) as { name: string };
});
return <Text>{user.data.value?.name ?? ''}</Text>;
}
export default function Account() {
return (
<Catch
fallback={(error, retry) => (
<VStack gap={8}>
<Text>{'Could not load: ' + String(error)}</Text>
<Button onPress={retry}>Try again</Button>
</VStack>
)}
>
<Profile />
</Catch>
);
}Behavior
The fallback receives the error and a retry callback. Retry mounts fresh children. Catch handles render, lifecycle and unhandled initial resource failures; handle event-handler and task promise rejections at their call sites.
Continue
Read Async for a complete workflow. See the complete prop reference for types and documented defaults.
Referenz
Signaturen
(props: CatchProps): KuitoElementParameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
props | CatchProps | Ja | — |
Rückgabe
Props: CatchProps
Props (einschließlich geerbter Props) 3
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.