[Mistake]: set-state-in-effect gives a wrong example of bad usage

Offen
#8,411 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
55/100
Issue-Typ
Dokumentation
Klarheit
Klar beschrieben
Aktivitätsstatus
Ruhig
Tech-Stack
javascript, react
Bereich
documentation

Rechercherichtung

Lies src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md, insbesondere die verlinkten Zeilen 70–91 und den Abschnitt „I want to sync state to a prop“. Prüfe das Counter-Beispiel und seine Aussage anhand des im issue beschriebenen Verhaltens; abgeschlossen ist die Aufgabe, wenn Beispiel und Erklärung den gemeldeten Fall korrekt beschreiben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

type: typos
Summary

https://github.com/reactjs/react.dev/blob/abe931a8cb3aee3e8b15ef7e187214789164162a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md?plain=1#L70-L91

Page

https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-render

Details
I want to sync state to a prop {/clamp-state-to-prop/}

A common problem is trying to "fix" state after it renders. Suppose you want to keep a counter from exceeding a max prop:

// ❌ Wrong: clamps during render
function Counter({max}) {
  const [count, setCount] = useState(0);

  if (count > max) {
    setCount(max);
  }

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

As soon as count exceeds max, an infinite loop is triggered.

I think this Counter component can be rendered and clicked without issues.
The claim that an infinite loop will be triggered is incorrect.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
16 Std. 6 Min.
Gemergte PRs (30 T.)
7

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus reactjs/react.dev

Alle Issues in reactjs/react.dev

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.