"use strict"; // demoaa erilaisia tapoja yrittää kopioida taulukko, joka sisältää objekteja ja muita // taulukoita. jqueryn extend toimii kuten myös itse tehty kopiointi. slice ja spread EIVÄT // toimi. Kokeile ensin slice tai spread painiketta, sen jälkeen poista alkuperäinen taulukko // kokeile uudelleen slice tai spread -> tuloksena on tyhjä, koska kopiointi ei alunperinkään // ollut kunnollinen kopio // Kokeile sama mutta tee ensimmäinen kopio extendilla tai omalla deep copylla. Tyhjää nyt // alkuperäinen taulukko. Nyt toimii... class App extends React.Component { constructor(props) { super(props); this.kisa = data.kisatiedot; this.rastit = data.rastit; this.state = { "joukkueet" : data.joukkueet }; this.slice = this.slice.bind(this); this.spread = this.spread.bind(this); this.extend = this.extend.bind(this); this.deep = this.deep.bind(this); } componentDidUpdate(prevProps, prevState) { console.log("App päivittyi"); } shouldComponentUpdate(nextProps, nextState) { // return false; return true; } // ei toimi kunnolla! shallow copy slice(e) { let joukkueet = this.state.joukkueet.slice(); joukkueet[0].jasenet[0] = "foobar"; this.setState({ joukkueet: joukkueet }); console.log("slice"); } // ei toimi kunnolla! shallow copy spread(e) { let joukkueet = [...this.state.joukkueet]; joukkueet[1].jasenet[0] = "foobar"; this.setState({ joukkueet: joukkueet }); console.log("spread"); } // toimii oikein tiettyyn rajaan asti. Jos on tarpeeksi monimutkainen rakenne niin tämäkin voi mennä solmuun extend(e) { let joukkueet = []; $.extend(true, joukkueet, this.state.joukkueet); joukkueet[2].jasenet[0] = "foobar"; this.setState({ joukkueet: joukkueet }); console.log("extend"); } // itse tehty toimii aina... deep(e) { let uusi = Array.from( this.state.joukkueet, function(j) { let uusij = {}; let kentat = ["nimi", "sarja", "seura", "id"]; for( let i of kentat ) uusij[i] = j[i]; let uusijasenet = Array.from( j["jasenet"] ); let uusirastit = Array.from( j["rastit"] ); uusij["jasenet"] = uusijasenet; uusij["rastit"] = uusirastit; // console.log(uusij); return uusij; }); uusi[3].jasenet[0] = "foobar"; this.setState({"joukkueet": uusi }); console.log("deep"); } // nollaa alkuperäisen tietorakenteen jotta nähdään onko oikeasti tehty kopio vai ei poista(e) { let count = 0; for( let i of data.joukkueet ) { i["id"] = count++; let kentat = ["nimi", "sarja", "seura"]; for( let j of kentat ) i[j] = null; for( let j in i.jasenet ) i.jasenet[j] = null; for( let j in i.rastit ) i.rastit[j] = null; } } render () { // datassa on joku rasti samoilla tiedoilla kahteen kertaan ja tulee key-virhe // käytetään laskuria apuna. Ei vaan pelitä ihan oikein jos lisätään sopivasti väliin... let count = 0; return
{item.rastit.map( function(rasti) { if (rasti) return {rasti.id}, else return } )}