渲染函数不渲染任何东西 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

您的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

Answer 2

试试这个。问题是 renderHorizo​​ntalContents() 没有返回，所以你必须返回 map 为你返回的元素

另外关于添加键，如果 items 数组包含每个对象的唯一 id，则使用它作为推荐的键。如果您没有来自数据的唯一 ID，则索引始终是第二选择。此外，在添加索引作为键时，您应该像下面那样添加一些东西，而不是直接添加索引作为键。

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