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

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

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

КарточкаЭкран:

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.

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


react-native react-native-flatlist
person Goowik    schedule 24.11.2018    source источник
comment
Возможный дубликат stackoverflow.com/questions/ 48965635/   -  person Prasun    schedule 24.11.2018
comment
@Prasun Теперь, когда я вижу ответ, это действительно был дубликат. Извините за эти неудобства :)   -  person Goowik    schedule 24.11.2018

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

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

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

person Kraylog    schedule 24.11.2018