[Mistake]: set-state-in-effect gives a wrong example of bad usage
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.8k
- Forks
- 7.9k
- Ø Merge
- 1 T. 11 Std.
- Gemergte PRs (30 T.)
- 11
Beschreibung
Summary
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
maxprop:
// ❌ 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
countexceedsmax, 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.
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
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.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- documentation
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Ruhig
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 55/100