функция рендеринга ничего не рендеринг React Native

Question

На экране ничего не отображается.Понятия не имею, почему это происходит, нигде нет ошибок.Хотите знать, почему ничего не отображается на экране.Правильно получать данные из API.Код указан ниже:

import React, { Component } from 'react';
import { StyleSheet, ScrollView, TouchableOpacity, Text, View } from 'react-native';
import { Container, Content, Grid, Row, Col } from 'native-base';
import axios from 'axios';
import ItemCard  from '../components/ItemCard';

export default class ItemHorizontalScreen  extends Component {
    constructor(props) {
        super(props)
        this.state = {
            items: []
        }
    }

    componentWillMount() {
        axios.get('http://rallycoding.herokuapp.com/api/music_albums').then(response => 
            this.setState({
                items: response.data
            }))
        .catch((error) => {
            console.error(error);
        })
    }

    renderHorizontalContents() {
        const rowItems = this.state.items
        rowItems.map((rowItem, index) => {
            return (
                <TouchableOpacity key={index}>
                    <Text>{rowItem.title}</Text>
                </TouchableOpacity>
            )
        })
    } 

    render() {
        return (
            <View>
            {this.renderHorizontalContents()}
            </View>
        )
    }
}

Answer 1

Попробуй это.Проблема заключается в том, что renderHor horizontalContents () не возвращается, поэтому вам нужно возвращать элементы, которые карта возвращает для вас

Также относительно добавления ключа, если массив элементов содержит уникальный идентификатор для объекта, используйте рекомендованный ключ.Индекс всегда второй вариант, если у вас нет уникального идентификатора из данных.Также при добавлении индекса в качестве ключа вы должны добавить что-то, как я сделал ниже, вместо того, чтобы добавлять индекс в качестве ключа напрямую.

renderHorizontalContents() {
        const { items } = this.state;
           return items.map((rowItem, index) => {
            return (
                <TouchableOpacity key={"Key"+index}>
                    <Text>{rowItem.title}</Text>
                </TouchableOpacity>
            )
        })
    } 

Answer 2

Ваш renderHorizontalContents() должен вернуть список:

renderHorizontalContents() {
    const rowItems = this.state.items
    return rowItems.map((rowItem, index) => {
        return (
            <TouchableOpacity key={index}>
                <Text>{rowItem.title}</Text>
            </TouchableOpacity>
        )
    })
} 

Кроме того, полу-связанный, с React 16.3 команда React рекомендует не использовать componentWillMount().Вы должны получить данные в componentDidMount() ловушке LifeCycle.

Подробнее о componentWillMount() устаревании:

https://github.com/styled-components/styled-components/issues/1575