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

尝试一下。问题是renderHorizontalContents（）没有返回，因此您必须返回地图为您返回的元素

关于添加密钥，如果items数组每个对象包含唯一的ID，则将其用作推荐的密钥。如果您没有数据中的唯一ID，则索引始终是第二个选择。另外，在将索引添加为键时，您应该像下面一样添加内容，而不是直接将索引添加为键。

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

渲染函数不渲染任何东西React Native

2 个答案: