Obje üzerinde gezinmek

hakan · Kasım 15, 2020, 9:48öö

Arkadaşlar merhaba,

Yeni olduğum bir konu, araştırdım ancak çözemedim, yardımınızı rica ediyorum.

Kendimi geliştirme amaçlı bir React projesi yapıyorum, hooklarla çalışacağım.

Aşağıda ki gibi bir dosya var diyelim, aslında api dan çekeceğim,
map fonksiyonu ile istediğim detayı sayfamda göstermek istiyorum.

Bir çok şey denedim, araştırdım ancak sanırım doğru yerlere bakmadım ki çözümü bulamadım.

Deneme amaçlı yazdığım her kodu buraya aktarıp uzatmak istemediğimden temelde üzerinde durduğum halini ekliyorum, hedefe götürecek her fikre açığım, doğru format(-lar) nedir, nasıl bir yol izelemeli, ana fikri verebilirseniz yeter, tüm kodu istemiyorum, balık vermeyin balık tutmayı öğretin

Şimdiden teşekkür ederim.

import React from 'react';

export default function ValueRef() {

    const liste = {
        "location_suggestions": [
          {
            "id": 61,
            "name": "London",
            "country_id": 215,
            "country_name": "United Kingdom",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_215.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 142,
            "state_name": "England and Wales",
            "state_code": "England and Wales"
          },
          {
            "id": 3454,
            "name": "London, ON",
            "country_id": 37,
            "country_name": "Canada",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_37.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 124,
            "state_name": "Ontario",
            "state_code": "ON"
          },
          {
            "id": 5836,
            "name": "London, KY",
            "country_id": 216,
            "country_name": "United States",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_216.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 85,
            "state_name": "Kentucky",
            "state_code": "KY"
          },
        ],
        "status": "success",
        "has_more": 0,
        "has_total": 0,
        "user_has_addresses": true
      }
   
    console.log( liste)

    return (
        <div>{
            Object.values(liste).map((detay)=>(<div>{detay}</div>))
        
        }</div>

    )
}

Error: Objects are not valid as a React child (found: object with keys {id, name, country_id,
country_name, country_flag_url, should_experiment_with, has_go_out_tab, discovery_enabled,
has_new_ad_format, is_state, state_id, state_name, state_code}). If you meant to render a collection
of children, use an array instead.

reo · Kasım 15, 2020, 10:35öö

Elinizdeki verilere uygun bir sekilde map fonksiyonu yazmaniz lazim. Ben yarida kalmis bir projemi atayim, orada yapmistim.

github.com

EkremDincel/Sozluk/blob/master/frontend/src/components/Home/TopicContent.jsx

import React from 'react';
import Entry from './Entry.jsx';

var example_data = [
  {
    id: 1,
    content: 'Lorem Ipsum Dolor Sit Amet',
    user: 'ramazanemre',
    date: '12.03.2021 Pazar'
  },
  {
    id: 2,
    content: 'Basit bir deneme',
    user: 'admin',
    date: '10.03.2021 Cuma',
  },
  {
    id: 3,
    content: 'Basit bir deneme',
    user: 'admin',

This file has been truncated. show original

(Entry componenti ust dizinde var.)

Bu arada hata, JSX’e eklemeye calistiginiz verilerin uygun olmadigini array kullanmaniz gerektigini soyluyor. (Ki dogru soyluyor, siz bir sozluk yapmissiniz.)

hakan · Kasım 15, 2020, 10:46öö

Merhaba, Yanıtın için teşekkür ederim, kafama takılan bir kaç şeyi soracağım:

“uygun şekilde map fonksiyonu yazman lazım” demişsin, kodunda
{this.props.data.map(generate_entry)} satırını görüyorum, bende buna benzer yazdım, farkı nedir anlayamadım. Doğru bakmıyorum sanırım, açıklayabilirsen sevinirim.
JSX de sozluk değil array kullanmalısın demişsin, bende buna göre

        {
            Object.values(liste).map((detay)=>(<div>{detay}</div>))
        
        }

şeklinde yazdım, çözümü bu değil mi (aslında değil ki hala hata alıyorum)… çözümü nedir peki?

reo · Kasım 15, 2020, 5:27ös

Benim elimdeki veriler soyleydi. (Eksisozluk’un klonunu yapiyorduk, her entry bir post oluyor)

var example_data = [ // Veriler array seklinde, her bir oge
                     // Her bir oge bir postu temsil ediyor.
  {
    id: 1,
    content: 'Lorem Ipsum Dolor Sit Amet',
    user: 'ramazanemre',
    date: '12.03.2021 Pazar'
  },
  {
    id: 2,
    content: 'Basit bir deneme',
    user: 'admin',
    date: '10.03.2021 Cuma',
  },
  {
    id: 3,
    content: 'Basit bir deneme',
    user: 'admin',
    date: '9.03.2021 Cuma',
  },
  {
    id: 4,
    content: 'Basit bir deneme',
    user: 'admin',
    date: '8.03.2021 Cuma',
  },
];

Devaminda ise, bu array’in her bir elemanini arguman olarak alacak bir fonksiyon yazdim.

function generate_entry(data) {
  return (
    // Entry componentiyle her bir postu yorumlamis olduk
    <Entry content={data.content} username={data.user} date={data.date}/>
  )
}

Son olarak ise map metodunu cagirdik:

{example_data.map(generate_entry)}

Bir de sizin verilerinize bakalim:

const liste = {
        "location_suggestions": [
          {
            "id": 61,
            "name": "London",
            "country_id": 215,
            "country_name": "United Kingdom",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_215.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 142,
            "state_name": "England and Wales",
            "state_code": "England and Wales"
          },
          {
            "id": 3454,
            "name": "London, ON",
            "country_id": 37,
            "country_name": "Canada",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_37.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 124,
            "state_name": "Ontario",
            "state_code": "ON"
          },
          {
            "id": 5836,
            "name": "London, KY",
            "country_id": 216,
            "country_name": "United States",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_216.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 85,
            "state_name": "Kentucky",
            "state_code": "KY"
          },
        ],
        "status": "success",
        "has_more": 0,
        "has_total": 0,
        "user_has_addresses": true
      }

Sizin verileriniz ise bir sozluk. Sadece location_suggestions'in icinde dogru veriyi goruyorum. Bunu ise su sekilde goruntulebiliriz.

function generate_table(data) {
	return (
		<tr>{{data.name}}</tr>
		<tr>{{country_id}}</tr>
		<tr>{{country_name}}</tr>
		<tr>Devami da buraya gelecek</tr>
	)
}

-component-
	render() {
		return (
			liste.location_suggestions.map(generate_table)
		)
	}

Kolay Gelsin

hakan · Kasım 15, 2020, 9:32ös

Çok teşekkürler

aib · Kasım 17, 2020, 10:47öö

> Object.values(liste).map((detay)=>('<div>{'+detay+'}</div>'))
[ '<div>{[object Object],[object Object],[object Object]}</div>',
  '<div>{success}</div>',
  '<div>{0}</div>',
  '<div>{0}</div>',
  '<div>{true}</div>' ]

> liste.location_suggestions.map(detay => '<div>{'+detay+'}</div>')
[ '<div>{[object Object]}</div>',
  '<div>{[object Object]}</div>',
  '<div>{[object Object]}</div>' ]

Hatta

> liste.location_suggestions.map(ls => '<div>'+Object.values(ls).map(detay => '<div>{'+detay+'}</div>')+'</div>')
[ '<div><div>{61}</div>,<div>{London}</div>,<div>{215}</div>,<div>{United Kingdom}</div>,<div>{https://b.zmtcdn.com/images/countries/flags/country_215.png}</div>,<div>{0}</div>,<div>{0}</div
>,<div>{0}</div>,<div>{0}</div>,<div>{0}</div>,<div>{142}</div>,<div>{England and Wales}</div>,<div>{England and Wales}</div></div>',                                                          
'<div><div>{3454}</div>,<div>{London, ON}</div>,<div>{37}</div>,<div>{Canada}</div>,<div>{https://b.zmtcdn.com/images/countries/flags/country_37.png}</div>,<div>{0}</div>,<div>{0}</div>,<d
iv>{0}</div>,<div>{0}</div>,<div>{0}</div>,<div>{124}</div>,<div>{Ontario}</div>,<div>{ON}</div></div>',                                                                                       
'<div><div>{5836}</div>,<div>{London, KY}</div>,<div>{216}</div>,<div>{United States}</div>,<div>{https://b.zmtcdn.com/images/countries/flags/country_216.png}</div>,<div>{0}</div>,<div>{0}
</div>,<div>{0}</div>,<div>{0}</div>,<div>{0}</div>,<div>{85}</div>,<div>{Kentucky}</div>,<div>{KY}</div></div>' ]