Ich habe Probleme mit einem Reaktionsformular und der ordnungsgemäßen Verwaltung des Status. Ich habe ein Zeit-Eingabefeld in einem Formular (in einem Modal). Der Anfangswert wird als Statusvariable in festgelegt getInitialState
und von einer übergeordneten Komponente übergeben. Dies an sich funktioniert gut.
Das Problem tritt auf, wenn ich den Standardwert start_time über die übergeordnete Komponente aktualisieren möchte. Das Update selbst erfolgt in der übergeordneten Komponente durch setState start_time: new_time
. In meinem Formular ändert sich der Standardwert start_time jedoch nie, da er nur einmal in definiert wird getInitialState
.
Ich habe versucht, componentWillUpdate
eine Zustandsänderung durchzusetzen setState start_time: next_props.start_time
, die tatsächlich funktioniert hat, aber mir Uncaught RangeError: Maximum call stack size exceeded
Fehler gegeben hat.
Meine Frage ist also, wie man den Status in diesem Fall richtig aktualisiert. Denke ich irgendwie falsch darüber nach?
Aktueller Code:
@ModalBody = React.createClass
getInitialState: ->
start_time: @props.start_time.format("HH:mm")
#works but takes long and causes:
#"Uncaught RangeError: Maximum call stack size exceeded"
componentWillUpdate: (next_props, next_state) ->
@setState(start_time: next_props.start_time.format("HH:mm"))
fieldChanged: (fieldName, event) ->
stateUpdate = {}
stateUpdate[fieldName] = event.target.value
@setState(stateUpdate)
render: ->
React.DOM.div
className: "modal-body"
React.DOM.form null,
React.createElement FormLabelInputField,
type: "time"
id: "start_time"
label_name: "Start Time"
value: @state.start_time
onChange: @fieldChanged.bind(null, "start_time”)
@FormLabelInputField = React.createClass
render: ->
React.DOM.div
className: "form-group"
React.DOM.label
htmlFor: @props.id
@props.label_name + ": "
React.DOM.input
className: "form-control"
type: @props.type
id: @props.id
value: @props.value
onChange: @props.onChange
[..]going to be deprecated in the future
Anscheinend ändern sich die Dinge ... getDerivedStateFromProps () ist jetzt die bevorzugte Funktion.
(über Code von danburzo @ github)
quelle
null
Ihrerreturn null
getDerivedStateFromProps
oder memoizationcomponentWillReceiveProps
wird veraltet, weil die Verwendung "häufig zu Fehlern und Inkonsistenzen führt".Wenn sich von außen etwas ändert, sollten Sie die untergeordnete Komponente vollständig mit zurücksetzen
key
.Durch das Bereitstellen einer
key
Requisite für die untergeordnete Komponente wird sichergestellt, dasskey
diese Komponente immer dann neu gerendert wird , wenn sich der Wert von außen ändert. Z.B,Zu seiner Leistung:
quelle
JSON.stringify(myObject)
einen eindeutigen Schlüssel von Ihrem Objekt ableiten.Es ist auch componentDidUpdate verfügbar.
Funktionssignatur:
Nutzen Sie dies als Gelegenheit, um das DOM zu bearbeiten, wenn die Komponente aktualisiert wurde. Wird bei der Initiale nicht aufgerufen
render
.Wir sehen, dass Sie wahrscheinlich keinen abgeleiteten Statusartikel benötigen , der Anti-Pattern für
componentDidUpdate
und beschreibtgetDerivedStateFromProps
. Ich fand es sehr nützlich.quelle
componentDidUpdate
es am Ende, weil es einfach und für die meisten Fälle besser geeignet ist.Die neue Methode für Hooks besteht darin, useEffect anstelle von componentWillReceiveProps auf die alte Weise zu verwenden:
wird in einer funktionalen, von Haken angetriebenen Komponente wie folgt:
Wir setzen den Status mit setState, verwenden useEffect, suchen nach Änderungen an der angegebenen Requisite und ergreifen die Aktion, um den Status bei Änderung der Requisite zu aktualisieren.
quelle
Sie brauchen wahrscheinlich keinen abgeleiteten Zustand
1. Legen Sie einen Schlüssel vom übergeordneten Element fest
2. Verwenden Sie
getDerivedStateFromProps
/componentWillReceiveProps
Durch die Verwendung
getDerivedStateFromProps
Sie einen Teil Zustand zurückgesetzt, aber es scheint ein wenig Buggy zu diesem Zeitpunkt (v16.7) !, siehe den Link oben für die Nutzungquelle
Aus der Reaktionsdokumentation: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
Seit Reaktion 16 ist componentWillReceiveProps veraltet. Aus der Reaktionsdokumentation wird in diesem Fall der empfohlene Ansatz verwendet
ParentComponent
DerModalBody
Wille besitzt denstart_time
Staat. Dies ist in diesem Fall nicht mein bevorzugter Ansatz, da ich denke, dass das Modal diesen Zustand besitzen sollte.start_time
Staat vollständig von Ihrem besitzenModalBody
und verwenden,getInitialState
wie Sie es bereits getan haben. Um denstart_time
Status zurückzusetzen, ändern Sie einfach den Schlüssel von derParentComponent
quelle
Es ist ganz klar aus ihren Dokumenten:
Verwenden Sie: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization
quelle
Verwenden Sie Memoize
Die Zustandsableitung des Op ist eine direkte Manipulation von Requisiten, ohne dass eine echte Ableitung erforderlich ist. Mit anderen Worten, wenn Sie eine Requisite haben, die direkt verwendet oder transformiert werden kann, müssen Sie die Requisite nicht im Status speichern .
Da der Statuswert von
start_time
einfach die Requisite iststart_time.format("HH:mm")
, reichen die in der Requisite enthaltenen Informationen bereits aus, um die Komponente zu aktualisieren.Wenn Sie jedoch das Format nur bei einem Requisitenwechsel aufrufen möchten, können Sie dies gemäß der neuesten Dokumentation über Memoize tun: https://reactjs.org/blog/2018/06/07/you-probably-dont- Need-Derivated-State.html # Was ist mit Memoisierung?
quelle
Ich denke, Verwendung ref ist sicher für mich, brauchen keine Pflege über eine der oben genannten Methoden.
quelle