FlatList 没有呈现我的 json 数组数据答案

【问题标题】：FlatList is not rendering my json array dataFlatList 没有呈现我的 json 数组数据
【发布时间】：2019-04-22 15:19:50
【问题描述】：

我在 FlatList 组件中渲染我的数组 json 数据时遇到了问题。我通过 web 和 stackoverflow 搜索了很多文档和信息。这是我看过的几个网页链接。但我想不通。

How to use Flatlist

FlatList

FlatList not Rendering

这是我的代码；

//Creating array for map the each item in places.
let array = [];
//Initializing the data to array for mapping it. data1 is my json data.
array.push(data1);

flatList = <FlatList
        style={{ backgroundColor: 'red' }} // backgroundColor is visible but no List Component data in it.
        data={array}
        keyExtractor={(x, i) => i.toString()}
        renderItem={({item}) => {
            <List
                district = {item.a.b.c.jsonArray[0].address}
                phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
                neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
            /> // nothing returns as <List />
        }}
    />;

这是我的退货声明；

return (
        <View style={{ flex: 1 }} >
            <TopBar
                name={"title"}
                bColor={"#1b92e7"}
                miniLogo={require('../../../assets/pictures/image.png')}
            />
            <List></List> 
            <List></List>
            {flatList}
        </View>
    );

在 return 语句中它正在渲染这两个组件，但在 flatList 变量中它没有渲染。是什么导致了问题？希望大家帮帮我？

非常感谢您的努力。

【问题讨论】：

你的意思是它不会在平面列表中呈现并作为回报呈现？你能提供更多细节吗？可能是错误或您当前获得的结果的预期结果。
@SamithaNanayakkara 我的意思是我的组件在 return 语句中独立可见，但是当尝试在 flatList 中呈现时，它没有显示我的但 backgroundColor 也是可见的。
你必须检查你的data1。你使用array.push(data1);，如果data1是一个数组，你将拥有[[ data ]]，你需要在FlatList中使用这个：data={array[0]}
@oma 感谢您的回答。我发现了我的错误。我将再次编辑我的问题。
跟我说的有关吗？ :)

标签： json reactjs react-native

【解决方案1】：

你没有从renderItem返回任何东西试试这样：

 renderItem={({item}) => {
            return (<List // for every item return your component
                district = {item.a.b.c.jsonArray[0].address}
                phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
                neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
            />); 
        }}

或者只使用简短的语法：

renderItem={({item}) => (<List // take a look at the brackets
                    district = {item.a.b.c.jsonArray[0].address}
                    phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
                    neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
                />
            )}

【讨论】：

您解决了这个问题吗？如果是，则将问题标记为已解决且编码愉快:)

【解决方案2】：

作为@oma 的回答，我将数据更改如下；

data = {array} -> data = {array[0]}

我的另一个错误是认为 ({item}) 是指我要呈现的 json 数据。它必须等于我们要渲染的 json 数据数组。

//final data.
data = {array[0].a.b.c.jsonArray}

作为@Stundji 的回答，它应该返回列表。

renderItem={({item}) => {
        return (<List
            district = {item.address}
            phoneNumber = {item.phoneNumber}
            neighbourhood = {item.sideInformation}
        />); //now it returns list in FlatList
    }}

感谢所有贡献。

【讨论】：