Behandeln von Komponentenanfragefehlern mit Catch und Fehlerzustand

import { useState, useEffect } from 'react';
 
function DataViewer() {
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetch('https://api.example.com/invalid')
      .then((res) => {
        if (!res.ok) throw new Error('Network response was not ok');
        return res.json();
      })
      .catch((err) => {
        setError(err.message);
      });
  }, []);
 
  if (error) return <div role="alert">Error: {error}</div>;
  return <div>Content loaded</div>;
}