数据出现在 console.log 中，但不在 <Text>{}</Text> 中尝试呈现 FlatList 时的标记 [英] Data appears in console.log, but not with in a <Text>{}</Text> tag when trying to render a FlatList

问题描述

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

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.

这是我的代码

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>

        )
    }
}

我尝试过以两种不同的方式呈现文本.第一种方法是在 renderItem 方法中返回 Text 标记之间的数据.这工作得很好.但是，当我尝试返回函数 renderStores 时，我看不到 Text 出现.但是当我 console.log 它时，数据确实出现了.

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.

推荐答案

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

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

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

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

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

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

这篇关于数据出现在 console.log 中，但不在 <Text>{}</Text> 中尝试呈现 FlatList 时的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！