React Native API ile Alt kategoriye veri basmak

[mehmetarikaan]

Merhaba, API'den gelen bi datam var. Bu datayı flatliste basıyorum. Her item'in bi alt kategorisi var. Bu alt kategorileri nasıl yazdırabilirim? (URL'de default id'im var. Seçili olan itemin parent id'sini alıp tekrar istek atmam gerekiyor bu kısmı çözemedim.) Şu anahtar kelimeyi arat bulursun dediğiniz kelime önerilerinize de açığım. Şimdiden teşekkürler.

[abdurrahmanekr]

Merhaba, tıklanan parent nesneyi bulmak için sanırsam model olarak göndermeniz gerekiyor. Tam olarak anlatmak için şöyle bir veriniz olduğunu düşünüyorum:

var data = [
    {
        id: '1',
        type: 'parent',
        text: 'Arabalar',
        subcategories: [
            {
                id: '1',
                type: 'child',
                text: 'Tesla'
            },
            {
                id: '2',
                type: 'child',
                text: 'Mercedes'
            }
        ]
    }
]

Böyle bir yapı oluşturabilirsiniz. Eğer size gelen veri sadece üst kategorileri getiriyor siz alt kategorileri getirmek için ayrı bir istek atıyorsanız yine bu model'i kullanabilirsiniz.

Herhangi kategorinin id değeri ile istek atıp alt kategoriler geldiğinde state'de veya başka bir değişkende tuttuğunuz değere ekleyip setState yaparak görünmesini sağlayabilirsiniz.

Örnek (mantık) kodu:

import React, { Component } from 'react';

export class Kategori extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: []
        };

        this.getSubCategory = this.getSubCategory.bind(this);
    }

    getSubCategory(id) {
        var self = this;

        fetch('servis')
        .then(res => {
            // res böyle geldiğini varsayıyorum
            // [{id: '1', type: 'child', text: 'Tesla'}, {id: '2', type: 'child', text: 'Mercedes'} ]
            if (res && res.length > 0) {
                // alt kategorisi getirilmek istenen kategori
                var category = self.state.data.find(x => x.id === id);

                // kategoriye alt kategori ekledik
                category.subcategories = res;

                // sonra state'i güncelledik
                self.setState({
                    data: self.state.data,
                })
            }
        })
    }

    render() {
        return (
            <View>
                {
                    this.state.data.map(x => (
                        <View>
                            <Text
                                onPress={() => this.getSubCategory(x.id)}>
                                {x.text}
                            </Text>
                        </View>
                        {
                            // burada alt kategoriler yazdırıyorsunuz
                            x.subcategories &&
                            x.subcategories.length > 0 &&
                            x.subcategories.map(y => (
                                <View>
                                    <Text>
                                        {y.text}
                                    </Text>
                                </View>
                            ))
                        }
                    ))
                }
            </View>
        );
    }
}

Umarım anlatabilmişimdir.