尝试呈现 FlatList 时，数据出现在 console.log 中，但未出现在 <Text>{}</Text> 标记中

Question

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

这是我的代码

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>

        )
    }
}

我试过用两种不同的方式渲染文本。第一个是通过 return 在 renderItem 方法中的 Text 标签之间获取数据。这非常有效。但是，当我尝试 return 函数 renderStores 时，我无法看到文本出现。但是当我 console.log 时数据确实出现了。

Answer 1

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

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

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

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

尝试呈现 FlatList 时，数据出现在 console.log 中，但未出现在 <Text>{}</Text> 标记中

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

react-native

react-native-flatlist