Toista sisäkkäisen objektin kautta React.js: ssä

Jos olet koskaan työskennellyt sovellusliittymien kanssa, tiedät, että heidän palauttamiensa tietojen rakenne voi monimutkaistua nopeasti.

Kuvittele, että soitat API: lle React-projektistasi ja vastaus näyttää tältä:

Object1 { Object2 { propertyIWantToAcess: anotherpropertyIWantToAcess: } }

Olet tallentanut tiedot komponenttisi tilaan muodossa this.state.myPosts, ja pääset käsittelemään ulkoisen objektin elementtejä seuraavilla tavoilla:

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

    Mutta ongelmana on, että et voi käyttää mitään sisäisiä esineitä.

    Sisäisten kohteiden arvot muuttuvat aina, joten et pysty koodaamaan heidän avaimiaan ja iteroimaan niiden läpi saadaksesi oikeat arvot.

    Mahdolliset ratkaisut

    Voi olla vaikeaa työskennellä suoraan monimutkaisten API-vastausten kanssa, joten ottakaamme askel taaksepäin ja yksinkertaistamme:

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

    lodashKirjastossa on yksinkertaisia menetelmiä tehdä saman asian, mutta tämä on nopea ja likainen tapa tehdä sama asia vanilja JS.

    Mutta sano, että haluat yksinkertaistaa edelleen, esimerkiksi:

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

    Mutta saat virheilmoituksen, TypeError: can't convert undefined to object errorkun yrität siirtää postskohteeseen Object.keys.

    Muista, että tällä virheellä ei ole mitään tekemistä Reactin kanssa. On laitonta siirtää kohdetta objektin komponenttina lapsena.

    Object.keys()palauttaa vain parametrina syötetyn objektin avaimet. Sinun on soitettava sille useita kertoja, jotta voit toistaa kaikki sisäkkäiset avaimet.

    Jos haluat näyttää koko sisäkkäisen objektin, yksi vaihtoehto on käyttää toimintoa muuntaa kukin objekti React-komponentiksi ja välittää se matriisina:

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

    {val}

    ) // wraps any non-object type inside

    }) ... return {data}

    Hyödyllisiä paketteja

    Toinen vaihtoehto on käyttää pakettia kuten json-kysely iteroimaan sisäkkäisten JSON-tietojen läpi.

    Tässä on muokattu versio rendertoiminnosta yllä käyttäen 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} ); } }