Kapitel 17: Häufige Fehler

In diesem Kapitel lernen wir häufige Fehler zu vermeiden.

---

17.1 Syntaxfehler

❌ Fehler 1: Vergiss {} für Ausdrücke

// ❌ Falsch
<p>Alter: age</p>

// ✅ Richtig
<p>Alter: {age}</p>

❌ Fehler 2: class statt className

// ❌ Falsch
<div class="container">...</div>

// ✅ Richtig
<div className="container">...</div>

❌ Fehler 3: for statt htmlFor

// ❌ Falsch
<label for="name">Name:</label>

// ✅ Richtig
<label htmlFor="name">Name:</label>

❌ Fehler 4: Style als String

// ❌ Falsch
<div style="color: red;">Text</div>

// ✅ Richtig
<div style={{ color: 'red' }}>Text</div>

---

17.2 State-Änderungsfehler

❌ Fehler 5: State direkt ändern

// ❌ Falsch
const [count, setCount] = useState(0);
count = count + 1; // FEHLER!

// ✅ Richtig
setCount(count + 1);

❌ Fehler 6: Objekte falsch aktualisieren

// ❌ Falsch
const [user, setUser] = useState({ name: "Max", age: 25 });
setUser({ age: 26 }); // Name geht verloren!

// ✅ Richtig
setUser({ ...user, age: 26 });

❌ Fehler 7: Arrays falsch aktualisieren

// ❌ Falsch
const [fruits, setFruits] = useState(["Apfel", "Banane"]);
fruits.push("Orange"); // FEHLER!
setFruits(fruits);

// ✅ Richtig
setFruits([...fruits, "Orange"]);

---

17.3 Routing-Fehler

❌ Fehler 8: <a> Tag statt <Link>

// ❌ Falsch (ganze Seite wird neu geladen)
<a href="/about">Über uns</a>

// ✅ Richtig (SPA-Navigation)
<Link to="/about">Über uns</Link>

❌ Fehler 9: Vergiss <Routes> Wrapper

// ❌ Falsch
function App() {
  return (
    <BrowserRouter>
      <Route path="/" element={<Home />} />
    </BrowserRouter>
  );
}

// ✅ Richtig
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

---

17.4 Hooks-Fehler

❌ Fehler 10: Hooks in Bedingungen

// ❌ Falsch
function App() {
  if (true) {
    const [count, setCount] = useState(0); // FEHLER!
  }
}

// ✅ Richtig
function App() {
  const [count, setCount] = useState(0); // Immer auf oberster Ebene
}

❌ Fehler 11: Hooks in Schleifen

// ❌ Falsch
function App() {
  for (let i = 0; i < 10; i++) {
    const [count, setCount] = useState(0); // FEHLER!
  }
}

// ✅ Richtig
function App() {
  const [count, setCount] = useState(0); // Einmal auf oberster Ebene
}

---

17.5 Asynchrone Fehler

❌ Fehler 12: Vergiss async/await oder .then()

// ❌ Falsch
function fetchData() {
  const response = fetch('/api/data'); // response ist ein Promise!
  console.log(response); // [object Promise]
}

// ✅ Richtig (mit async/await)
async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log(data);
}

// ✅ Richtig (mit .then())
function fetchData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data));
}

❌ Fehler 13: Vergiss Fehlerbehandlung

// ❌ Falsch
function fetchData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => setData(data));
}

// ✅ Richtig
function fetchData() {
  fetch('/api/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Netzwerkfehler');
      }
      return response.json();
    })
    .then(data => setData(data))
    .catch(error => console.error('Fehler:', error));
}

---

17.6 Render-Fehler

❌ Fehler 14: Mehrere Elemente ohne Wrapper

// ❌ Falsch
function App() {
  return (
    <h1>Titel</h1>
    <p>Text</p>
  );
}

// ✅ Richtig (mit Fragment)
function App() {
  return (
    <>
      <h1>Titel</h1>
      <p>Text</p>
    </>
  );
}

❌ Fehler 15: key nicht eindeutig

// ❌ Falsch (Index als key)
{fruits.map((fruit, index) => (
  <li key={index}>{fruit}</li> // Probleme bei Sortierung/Löschung!
))}

// ✅ Richtig (eindeutige ID)
{users.map(user => (
  <li key={user.id}>{user.name}</li>
))}

---

17.7 Debugging-Tipps

🔍 Browser-Entwicklerwerkzeuge

Chrome DevTools:

1. Console: Fehlermeldungen ansehen
2. Network: API-Aufrufe überwachen
3. React Developer Tools: Komponentenstruktur untersuchen

🐛 console.log() verwenden

function App() {
  const [count, setCount] = useState(0);

  console.log('count hat sich geändert:', count); // Debugging

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>Erhöhen</button>
    </div>
  );
}

🛑 Breakpoints setzen

1. Öffnen Sie Chrome DevTools (F12)
2. Gehen Sie zum Sources Tab
3. Klicken Sie auf die Zeilennummer, um einen Breakpoint zu setzen
4. Führen Sie den Code aus → Ausführung hält beim Breakpoint

---

17.8 Häufige Fehlermeldungen

❌ "Cannot read property 'xxx' of undefined"

Ursache: Zugriff auf Eigenschaft eines undefined Objekts.

Lösung:

// ❌ Falsch
const user = null;
console.log(user.name); // FEHLER!

// ✅ Richtig
const user = null;
console.log(user?.name); // Optional Chaining

❌ "Too many re-renders"

Ursache: Endlosschleife beim Rendering.

Lösung:

// ❌ Falsch
function App() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // Löst neues Rendering aus → Endlosschleife!
  
  return <p>{count}</p>;
}

// ✅ Richtig
function App() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(count + 1); // Nur einmal beim Mounten
  }, []);
  
  return <p>{count}</p>;
}

❌ "Hooks called conditionally"

Ursache: Hook wird in Bedingung aufgerufen.

Lösung:

// ❌ Falsch
function App() {
  if (true) {
    const [count, setCount] = useState(0); // FEHLER!
  }
}

// ✅ Richtig
function App() {
  const [count, setCount] = useState(0); // Immer auf oberster Ebene
}

---

📝 Zusammenfassung

In diesem Kapitel haben wir gelernt:

• ✅ Häufige Syntaxfehler zu vermeiden
• ✅ State richtig zu ändern
• ✅ Routing-Fehler zu vermeiden
• ✅ Hooks-Regeln einzuhalten
• ✅ Asynchrone Fehler zu behandeln
• ✅ Render-Fehler zu vermeiden
• ✅ Debugging-Techniken anzuwenden

---

🎯 Nächste Schritte

Im nächsten Kapitel werden wir lernen:

• React-Interviewfragen für Anfänger
• Häufige Fragen in Vorstellungsgesprächen
• Wie man sich vorbereitet

Bereit für Interviewvorbereitung? → Kapitel 18: Interviewfragen