Javascript 渲染函数不渲染任何本机对象

屏幕上没有呈现任何内容。不知道为什么会这样，哪里都没有错误。想知道为什么屏幕上什么都没显示。正确地从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>
        )
    }
}

import React，{Component}来自'React'；
从“react native”导入{样式表、ScrollView、TouchableOpacity、文本、视图}；
从“本机基”导入{容器、内容、网格、行、列}；
从“axios”导入axios；
从“../components/ItemCard”导入ItemCard；
导出默认类ItemHorizontalScreen扩展组件{
建造师（道具）{
超级（道具）
此.state={
项目：[]
}
}
组件willmount（）{
axios.get（）http://rallycoding.herokuapp.com/api/music_albums）。然后（响应=>
这是我的国家({
项目：答复.数据
}))
.catch（（错误）=>{
控制台错误（error）；
})
}
renderHorizontalContents（）{
const rowItems=this.state.items
rowItems.map（（rowItem，index）=>{
返回(
{rowItem.title}
)
})
} 
render（）{
返回(
{this.renderHorizontalContents（）}
)
}
}

您的

renderHorizontalContents（）

应返回以下列表：

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

renderHorizontalContents（）{
const rowItems=this.state.items
返回rowItems.map（（rowItem，index）=>{
返回(
{rowItem.title}
)
})
} 

此外，从React 16.3开始，React团队建议不要使用

组件willmount（）

。您应该在

componentDidMount（）

lifecyclehook中获取数据

有关

componentWillMount（）

弃用的详细信息：

---

试试这个。问题是renderHorizontalContents（）没有返回，因此您必须返回map为您返回的元素

另外，关于添加键，如果items数组包含每个对象的唯一id，则使用该id作为建议的键。如果您没有来自数据的唯一id，则索引始终是第二个选项。另外，当添加索引作为键时，您应该像下面那样添加一些内容，而不是直接添加索引作为键

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

renderHorizontalContents（）{
const{items}=this.state；
返回项目.map（（行项目，索引）=>{
返回(
{rowItem.title}
)
})
} 

您必须从

renderHorizontalContents

函数返回一些内容。使用

return rowItems.map（（rowItem，index）=>{…}

good catch..现在开始工作..非常感谢：）@nrgwsthy您不需要if，如果您已经有了长度，那么它已经是一个数组，所以不会循环them@JoeWarner我同意你的看法