Компонентийн төлвийн өөрчлөлтийг хийх setState арга ансинхрон ажиллагаатай тул төлвийн өөрчлөлтийг зөв хийж сурах хэрэгтэй. Үүнийг Фрагмент хичээлд үүсгэсэн
import React, { Component } from 'react'
export default class Counter extends Component {
state = {
counter: 0
}
addCounter = () => {
this.setState({
counter: this.state.counter + 1
})
}
render() {
return (
<div>
<h2>Тоолуур {this.state.counter}</h2>
<button onClick={this.addCounter}>+</button>
<button onClick={() => this.setState({ counter: this.state.counter - 1 })}>-</button>
</div>
)
}
}Counter компонентийн жишээн дээр авч үзье.
Компонентод counter -ийг өөрчлөх addCounter функцийг тодорхойлон өгөөд түүнийг + дээр дарахад дуудан ажлуулж байгаа. addCounter функцэд this.setState гэж төлвийн тухайн үеийн утганд хандан өөрчлөлтийг хийсэн. setState арга ансинхрон ажиллагаатай гэдэг нь төлвийн утгыг өөр хэрэглэгч өөрчилж болно гэсэн үг. Иймээс төлвийн тухайн үеийн утганд this.state.counter гэж шууд хандвал буруу утгыг авч болох юм. Ийм байдалд орохгүйн тулд setState аргад обьект дамжуулахгүйгээр
addCounter = () => {
this.setState((prevState) => {
return {
counter: prevState.counter + 1,
};
});
};гэж ашиглаж болно. Кодод setState аргад обьект биш prevState параметрийг авах функцийг дамжуулсан. Функцэд ирэх prevState параметрт төлвийн өмнөх утга хадгалагдаж байх тул counter төлвийг prevState.counter + 1 гэж өөрчлөөд шинэ обьектийг буцаах нь илүү зөв аргачлал. Кодийг өөрчлөлтийг хадгалаад програмийн ажиллагааг шалгавал
бүгд хэвийн ажиллана. Төлөвт дэх counter -ийн утгыг дээрх аргаар өөрчлөх нь төлвийн ансинхрон өөрчлөлтөөс бүрэн хамгаалагдах тул илүү оновчтой арга. Хэрвээ та төлөвт ямар нэгэн ансинхрон өөрчлөлт орохгүйг мэдэж байвал өмнөх буюу setState аргад обьект дамжуулан өөрчилж байсан аргыг ашиглаж болох ч сүүлийн аргачлал нь илүү аюулгүй бөгөөд зөв арга гэдгийг сануулъя.
