Iterálás a beágyazott objektumon keresztül a React.js fájlban

Ha valaha dolgozott API-kkal, akkor tudja, hogy az általuk visszaküldött adatok szerkezete gyorsan bonyolulttá válhat.

Képzeld el, hogy API-t hívsz a React projektedből, és a válasz így néz ki:

Object1 { Object2 { propertyIWantToAcess: anotherpropertyIWantToAcess: } }

Az adatokat a komponens állapotában tárolta this.state.myPosts, és a következő objektumokkal férhet hozzá a külső objektum elemeihez:

render() { console.log(this.state.myPosts); const data = this.state.myPosts; const display = Object.keys(data).map((d, key) => { return ( 
  • {data.current_route}
  • ); }); return(
      { display }
    ); }

    De a probléma az, hogy egyetlen belső objektumhoz sem férhet hozzá.

    A belső objektumok értékei mindig változnak, így nem tudja hardveresen kódolni a kulcsaikat és iterálni azokon a megfelelő értékek megszerzéséhez.

    Lehetséges megoldások

    Nehéz lehet közvetlenül dolgozni összetett API-válaszokkal, ezért tegyünk egy lépést hátra és egyszerűsítsük:

    const visit = (obj, fn) => { const values = Object.values(obj) values.forEach(val => val && typeof val === "object" ? visit(val, fn) : fn(val)) } // Quick test const print = (val) => console.log(val) const person = { name: { first: "John", last: "Doe" }, age: 15, secret: { secret2: { secret3: { val: "I ate your cookie" } } } } visit(person, print) /* Output John Doe 15 I ate your cookie */

    A lodashkönyvtárnak egyszerű módszerei vannak ugyanarra a dologra, de ez egy gyors és piszkos módszer ugyanarra a dologra a vanília JS-ben.

    De mondd, hogy tovább szeretnél egyszerűsíteni, például:

    render() { // Logs data console.log(this.state.myPosts); const data = this.state.myPosts; // Stores nested object I want to access in posts variable const posts = data.content; // Successfully logs nested object I want to access console.log(posts); // Error, this will not allow me to pass posts variable to Object.keys const display = Object.keys(posts).map(key => {posts[key]} ) return( {display} ); }

    De kapsz egy hiba, TypeError: can't convert undefined to object erroramikor megpróbálja átadni postsa Object.keys.

    Ne feledje, hogy ennek a hibának semmi köze a React-hez. Törvénytelen az objektum átadása komponensként gyermekként.

    Object.keys()csak a paraméterként átadott objektum kulcsait adja vissza. Az összes beágyazott kulcs ismétléséhez többször is meg kell hívnia.

    Ha a teljes beágyazott objektumot meg kell jelenítenie, az egyik lehetőség az, hogy egy függvény segítségével minden objektumot React komponenssé alakít át, és tömbként továbbítja:

    let data= [] visit(obj, (val) => { data.push(

    {val}

    ) // wraps any non-object type inside

    }) ... return {data}

    Hasznos csomagok

    Egy másik lehetőség egy olyan csomag használata, mint a json-query, hogy elősegítse a beágyazott JSON-adatok áthaladását.

    Itt van a renderfenti függvény módosított változata a következők használatával json-query:

     render() { const utopian = Object.keys(this.state.utopianCash); console.log(this.state.utopianCash); var author = jsonQuery('[*][author]', { data: this.state.utopianCash }).value var title = jsonQuery('[*][title]', { data: this.state.utopianCash }).value var payout = jsonQuery('[*][total_payout_value]', { data: this.state.utopianCash }).value var postLink = jsonQuery('[*][url]', { data: this.state.utopianCash }).value var pendingPayout = jsonQuery('[*][pending_payout_value]', { data: this.state.utopianCash }).value var netVotes = jsonQuery('[*][net_votes]', { data: this.state.utopianCash }).value let display = utopian.map((post, i) => { return ( 

    Author: {author[i]}

    Title: {title[i]}

    Pending Payout: {pendingPayout[i]}

    Votes: {netVotes[i]}

    ); }); return ( {display} ); } }