Question

我试图让一些特定数据出现在某些标签中，但它没有显示。但是，当我在console.log中找到我试图在Text标签中获取的相同数据时，我可以看到它。

这是我的代码

import React, { Component } from 'react';
import { 
        View,
        FlatList,
        Text
        } from 'react-native'

import { NavigationActions } from 'react-navigation';
import { Header } from '../common';
import Config from '../Config';

export default class Costco extends Component {
    constructor() {
        super();
        this.state = {
            stores: [],
        };
    }
    componentWillMount() {
        const obj = Config.costcoThree;
        const costcoArr = Object.values(obj);

        this.setState({
            stores: costcoArr,
        })
    }

    renderStores(item) {
        const navigate = this.props.navigation;
        console.log(item.branchName);
        return (
            <Text>{item.branchName}</Text>
        );
    }
    render(){
        return(

            <View>

                <Header headerText="Costco"/>
                <Text>Hello</Text>
                <FlatList
                    data={this.state.stores}
                    renderItem={({item}) => {
                        this.renderStores(item)
                        //return<Text>{item.branchName}</Text>
                    }}
                    keyExtractor={(item) => item.id}
                />
            </View>

        )
    }
}

我尝试过两种不同的方式渲染Text。第一种方法是在renderItem方法中返回Text标签之间的数据。这非常有效。但是，当我尝试返回函数renderStores时，我无法看到Text出现。但是当我在console.log中时，数据会出现。

Answer 1

作为简短回答，您需要在FlatList的return this.renderStores(item)方法中添加renderItem。

如果你在函数中使用花括号{}，除非你明确地添加return语句，否则它不会返回任何内容。

对于另一种解决方法，您可以删除大括号，它会自动返回您的this.renderStores(item)方法。

如果您需要任何示例，请告诉我

在尝试呈现FlatList时，数据显示在console.log中，但不会显示在<text> {} </text>标记中

1 个答案: