Mam takovy dotaz, jak neco udelat na frontendu v Reactu.
Mam nejakou domenu, treba pro aplikaci Kaloricke tabulky:
- Uzivatel (nick)
- Potravina (nazev, kalorie)
- ZaznamPotraviny (datum, uzivatel, potravina, mnozstvi)
Instance trid tehle domeny mam
jakoby v nejake globalni promenne:
const myDomain = {
potraviny: [],
zaznamyPotravin: [],
uzivatel: new Uzivatel("Admin");
}
A tyhle domenove objekty jsou pomitnute do tabulky na webove strance skrze instanci komponenty TabulkaZaznamu:
datum, potravina, mnozstvi, kalorie
1.1.2021, ryze, 500g, 2000kcal
2.1.2021, maslo, 10g, 90kcal
Nasledne, co
ocekavam ze muzu udelat:
myDomain.zaznamyPotravin
.filter(zaznam => zaznam.datum === '1.2.2021' && zaznam.potravina.nazev === 'ryze')
.forEach(zaznam => zaznam.mnozstvi = 50);
A dojde k
automatickemu promitnuti teto zmeny do vykreslene instance komponenty TabulkaZaznamu:
[datum] [potravina] [mnozstvi] [suma kalorie]
[1.1.2021][ryze][50g][200kcal]
[2.1.2021][maslo][10g][90kcal]
Co vsak ale musim udelat (resp. jeste pred 3 lety (v javascriptu pravek?) jsem musel udelat) v te dobe v nejpopularnejsim frameworku na svete, v Reactu, je tenhle strasny a sileny hoven:
this.setState({
zaznamyPotravin: this.state.zaznamPotravin
.map(zaznam => zaznam.datum === '1.2.2021' && zaznam.nazev === 'ryze'
? Object.assign(new ZaznamPotravin(), zaznam, {mnozstvi: 50})
: zaznam)
});
Tzn. musel bych kompletne vytvorit znovu cely objekt, aby to bylo jak to React vyzaduje.
Oproti tomu ve Vue.js to muzu klidne udelat tak jak jsem puvodne chtel:
this.myDomain.zaznamyPotravin
.filter(zaznam => zaznam.datum === '1.2.2021' && zaznam.potravina.nazev === 'ryze')
.forEach(zaznam => zaznam.mnozstvi = 50);
Vue.js totiz udela to, ze si vsechny, i vnorene atributy stavu, projde, a zaobali je do Setteru. Takze kdyz volam:
this.myDomain.zaznamyPotravin[0].mnozstvi = 50
Tak Vue vlastne zavola svuj setter na atributu "mnozstvi" a tim vi, co se mu kde zmenilo.
Muze mi nekdo vysvetlit, jak to v Reactu muze takhle fungovat, a i presto je to nejpopularnejsi framework?
Zobrazit příspěvky
