Data appears in console.log, but not with in a <Text>{}</Text> tag when trying to render a FlatList

问题

I'm trying to get some specific data to appear within some tags but it does NOT show. However, when I console.log the same data that I'm trying to get in the Text tags, I can see it.

Here is my code

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>

        )
    }
}

I've tried rendering Text two different ways. The first, was by returning the data between Text tags within the renderItem method. This worked perfectly. However, when I attempt to return the function renderStores, I am not able to see the Text appear. But the data does appear when I console.log it.

回答1:

as a short answer you need to add return this.renderStores(item) in your renderItem method of FlatList.

if you are using curly braces {} in your function it will not return anything unless you explicitly add return statement in that.

for another workaround you can remove the curly braces and it will automatically return your this.renderStores(item) method.

If you need any example please let me know

来源：https://stackoverflow.com/questions/48920444/data-appears-in-console-log-but-not-with-in-a-text-text-tag-when-trying-t