Iterate läbi pesastatud objekti React.js-is

Kui olete kunagi API-ga töötanud, teate, et nende tagastatud andmete struktuur võib kiiresti keeruliseks muutuda.

Kujutage ette, et helistate oma Reacti projektist API-le ja vastus näeb välja umbes selline:

Object1 { Object2 { propertyIWantToAcess: anotherpropertyIWantToAcess: } }

Andmed olete salvestanud oma komponendi olekusse this.state.myPostsja pääsete välise objekti elementidele juurde järgmiselt:

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 }
    ); }

    Kuid probleem on selles, et te ei pääse ühegi sisemise objekti juurde.

    Siseobjektide väärtused muutuvad alati, nii et te ei saa nende võtmeid kodeerida ja neid korrata, et saada õigeid väärtusi.

    Võimalikud lahendused

    Otseste keeruliste API-vastustega töötamine võib olla keeruline, seega astume sammu tagasi ja lihtsustame:

    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 */

    lodashRaamatukogu on lihtsate meetoditega saavutada sama asi, kuid see on kiire ja määrdunud viis seda teha sama asi vanilje JS.

    Kuid öelge, et soovite veelgi lihtsustada, näiteks:

    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} ); }

    Aga teil viga, TypeError: can't convert undefined to object errorkui te proovida läbida postskuni Object.keys.

    Pidage meeles, et sellel veal pole Reactiga midagi pistmist. Komponendi lapsena objekti mööda laskmine on ebaseaduslik.

    Object.keys()tagastab ainult parameetrina edastatud objekti võtmed. Kõigi pesastatud võtmete kordamiseks peate seda mitu korda helistama.

    Kui peate kuvama kogu pesastatud objekti, on üks võimalus kasutada funktsiooni iga objekti teisendamiseks komponendiks React ja massiivi edastamiseks:

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

    {val}

    ) // wraps any non-object type inside

    }) ... return {data}

    Kasulikud pakendid

    Teine võimalus on kasutada paketti nagu json-query, et aidata pesitsevate JSON-andmete kaudu iteratsiooni teha.

    Siin on renderülaltoodud funktsiooni muudetud versioon, kasutades 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} ); } }