FlatList рендеринг пустых дочерних элементов - PullRequest
Новая
       3

FlatList рендеринг пустых дочерних элементов

0 голосов
/ 24 ноября 2018

Кажется, у меня проблема с отображением дочерних элементов в FlatList.

Итак, я создаю приложение для создания колоды торговых карточек.В качестве базы данных я использую файл json, содержащий около 1300 карточных объектов.

CardScreen: 

export default class CardsScreen extends React.Component {

constructor() {
    super();

    this.state = {
        cards: []
    }
}

componentDidMount() {
    this.setState({
        cards: cardsService.getCardsIds()
    });
}

render() {
    const {cards} = this.state;

    return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
            <View>
                <Text>Cards Screen</Text>
                <Text>Number of cards: {cards.length}</Text>
            </View>
            <View>
                <FlatList
                    data={cards}
                    renderItem={(id) => <Text>id={cards[id]}</Text>}
                    keyExtractor={(id) => 'card-${id}'}
                />
            </View>
        </View>
    );
}

}

Во время componentDidMount я получаю все идентификаторы каждогоjson объект и создать простой массив (state.cards).Обычно я использовал Компонент Карты для его рендеринга, но список казался пустым, поэтому я решил, как тест, отрендерить сам идентификатор.

Я отчетливо вижу, как выводится более 1000 текстов "id =", к сожалению, без значения id.

Не уверен, что я делаю здесь неправильно.

1 Ответ

0 голосов
/ 24 ноября 2018

Функция, которую вы передаете renderItem, получает в качестве параметра вашу запись данных, заключенную в объект: 

{
  item: {... your object ...}
}

Таким образом, чтобы получить ее, вы можете сделать следующее: 

renderItem={({item}) => <Text>id={cards[item.id]}</Text>}

renderItem также отправляет еще пару вещей в этот объект.Взгляните здесь .

...