Als de status van een react-component verandert, wordt de rendermethode aangeroepen. Daarom kan voor elke statuswijziging een actie worden uitgevoerd in de body van de rendermethoden. Is er dan een specifieke use case voor de setState callback?
Antwoord 1, autoriteit 100%
Ja, dat is zo, aangezien setStateop een asynchronousmanier werkt. Dat betekent dat na het aanroepen van setStatede variabele this.stateniet onmiddellijk wordt gewijzigd. dus als u een actie wilt uitvoeren direct nadat u de status op een statusvariabele hebt ingesteld en vervolgens een resultaat wilt retourneren, is een callback handig
Beschouw het onderstaande voorbeeld
....
changeTitle: function changeTitle (event) {
this.setState({ title: event.target.value });
this.validateTitle();
},
validateTitle: function validateTitle () {
if (this.state.title.length === 0) {
this.setState({ titleError: "Title can't be blank" });
}
},
....
De bovenstaande code werkt mogelijk niet zoals verwacht, aangezien de variabele titlemogelijk niet is gemuteerd voordat de validatie erop is uitgevoerd. Nu vraag je je misschien af dat we de validatie in de functie render()zelf kunnen uitvoeren, maar het zou een betere en schonere manier zijn als we dit in de functie changeTitle zelf aankunnen, omdat dat je code beter zou maken. georganiseerd en begrijpelijk
In dit geval is terugbellen nuttig
....
changeTitle: function changeTitle (event) {
this.setState({ title: event.target.value }, function() {
this.validateTitle();
});
},
validateTitle: function validateTitle () {
if (this.state.title.length === 0) {
this.setState({ titleError: "Title can't be blank" });
}
},
....
Een ander voorbeeld is wanneer u wilt dispatchen actie wilt ondernemen wanneer de status is gewijzigd. je zult het willen doen in een callback en niet in de render()zoals het zal worden aangeroepen telkens wanneer opnieuw renderen plaatsvindt en daarom zijn veel van dergelijke scenario’s mogelijk waarbij je teruggebeld moet worden.
Een ander geval is een API Call
Er kan zich een geval voordoen wanneer u een API-aanroep moet doen op basis van een bepaalde statuswijziging. Als u dat doet in de rendermethode, wordt deze aangeroepen bij elke render onState-wijziging of omdat sommige Prop doorgegeven aan het Child Componentgewijzigd.
In dit geval zou u een setState callbackwillen gebruiken om de bijgewerkte statuswaarde door te geven aan de API-aanroep
....
changeTitle: function (event) {
this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
// Call API with the updated value
}
....
Antwoord 2, autoriteit 23%
this.setState({
name:'value'
},() => {
console.log(this.state.name);
});
Antwoord 3, autoriteit 18%
De 1. usecase die in me opkomt, is een api-aanroep, die niet in de render zou moeten komen, omdat deze voor eachstatuswijziging wordt uitgevoerd. En de API-aanroep mag alleen worden uitgevoerd bij een speciale statuswijziging, en niet bij elkerender.
changeSearchParams = (params) => {
this.setState({ params }, this.performSearch)
}
performSearch = () => {
API.search(this.state.params, (result) => {
this.setState({ result })
});
}
Vandaar dat voor elke statuswijziging een actie kan worden uitgevoerd in de hoofdtekst van de rendermethoden.
Zeer slechte gewoonte, omdat de render-methode puur moet zijn, betekent dit dat er geen acties, statuswijzigingen, api-aanroepen moeten worden uitgevoerd, gewoon je weergave samenstellen en breng het terug. Acties mogen alleen op bepaalde evenementen worden uitgevoerd. Render is geen gebeurtenis, maar bijvoorbeeld componentDidMount.
Antwoord 4, autoriteit 12%
Overweeg setState-oproep
this.setState({ counter: this.state.counter + 1 })
IDEE
setState kan worden aangeroepen in asynchrone functie
Je kunt dus niet op thisvertrouwen. Als de bovenstaande aanroep binnen een asynchrone functie is gedaan, verwijst thisnaar de status van het onderdeel op dat moment, maar we verwachtten dat dit zou verwijzen naar de eigenschap binnen de status op het moment dat setState werd aangeroepen of het begin van de asynchrone taak. En aangezien de taak asynchrone oproep was, kan die eigenschap in de loop van de tijd zijn veranderd. Het is dus onbetrouwbaar om thistrefwoord te gebruiken om naar een eigenschap van de staat te verwijzen, dus gebruiken we de callback-functie waarvan de argumenten previousState en props zijn, wat betekent dat wanneer de asynchrone taak was voltooid en het tijd was om de status bij te werken met behulp van setState-aanroep prevState verwijst naar state now als setState nog niet is gestart. Betrouwbaarheid garanderen dat nextState niet beschadigd zou raken.
Verkeerde code: zou leiden tot corruptie van gegevens
this.setState(
{counter:this.state.counter+1}
);
Correcte code met setState met terugbelfunctie:
this.setState(
(prevState,props)=>{
return {counter:prevState.counter+1};
}
);
Dus wanneer we onze huidige status moeten bijwerken naar de volgende status op basis van de waarde die de eigenschap zojuist heeft en dit allemaal op een asynchrone manier gebeurt, is het een goed idee om setState als callback-functie te gebruiken.
Ik heb geprobeerd het hier in codepen uit te leggenCODE PEN
Antwoord 5
Soms hebben we een codeblok nodig waar we een bewerking direct na setState moeten uitvoeren, waarvan we zeker weten dat de status wordt bijgewerkt. Dat is waar setState callback in het spel komt
Er was bijvoorbeeld een scenario waarin ik een modaal moest inschakelen voor 2 van de 20 klanten, voor de klanten waar we het hadden ingeschakeld, was er een bepaalde tijd voor het nemen van API-aanroepen, dus het zag er zo uit
p>
async componentDidMount() {
const appConfig = getCustomerConfig();
this.setState({enableModal: appConfig?.enableFeatures?.paymentModal }, async
()=>{
if(this.state.enableModal){
//make some API call for data needed in poput
}
});
}
enableModal boolean was ook vereist in UI-blokken in de renderfunctie, daarom heb ik hier setState gedaan, anders had ik de voorwaarde maar één keer kunnen controleren en ofwel API-set aangeroepen of niet.