FlatList不显示接口结果
FlatList是React Native中的一个组件，用于展示长列表数据。它可以高效地渲染大量数据，并且支持滚动、分页加载等功能。
在使用FlatList时，如果接口结果没有显示出来，可能有以下几个原因：
- 数据未正确传递：首先要确保接口返回的数据已经正确传递给了FlatList组件。可以通过打印数据或者使用调试工具来确认数据是否正确传递。
- 数据格式不匹配：FlatList要求数据是一个数组，并且每个元素都有一个唯一的key属性。如果接口返回的数据格式不符合要求，可以通过对数据进行处理，将其转换为符合要求的格式。
- 数据为空或加载失败：如果接口返回的数据为空或加载失败，FlatList将无法显示任何内容。可以通过检查接口返回的数据是否为空或者查看网络请求是否成功来解决这个问题。
- 样式问题：有时候，接口返回的数据已经正确传递给了FlatList，但是由于样式问题导致数据无法显示。可以检查FlatList的样式设置，确保其高度、宽度等属性正确设置。
推荐的腾讯云相关产品：腾讯云移动开发平台（https://cloud.tencent.com/product/mmp）
腾讯云移动开发平台是一站式移动应用开发平台，提供了丰富的移动开发工具和服务，包括移动应用开发框架、移动应用测试、移动应用分发、移动应用运营等功能，可以帮助开发者快速构建和发布移动应用。
相关·内容
2回答
我只是在训练如何使用useEffects的react-native中的apis，以及如何在console.log ()中返回结果，但在它没有显示的视图中，我认为这是不是keyExtractor ... const api = 'https://randomuser.me/api/?&results=2';
const Detalhes = () => {
const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState([]);
const [er
浏览 16提问于2020-12-13得票数 1
回答已采纳
我有一个搜索栏，可以更新提供给我FlatList的this.state.data。当我在SearchBar中输入类似tttt的内容时……this.state.data被更新为一个空的array....and，您在console.log('Populating flatview with:' + this.state.data);下面看到的console.log显示该数组现在是emptied...however，而FlatList没有改变以反映这一点。this.state.data肯定会更改为空数组，但FlatList不会刷新。 有什么想法吗？提前感谢 constructo
浏览 18提问于2019-02-10得票数 0
1回答
我有键盘阻止平面列表的问题。UI如下所示
<View>
<View>
Buttons...
</View>
<View>
Input Field...
</View>
<View>
Input Field...
</View>
<View>
Buttons...
</View>
<Flatlist>
</View>
当我在输入字段中输入时，它将在Flatlist上
浏览 15提问于2019-10-28得票数 0
我想限制在FlatList中呈现的项目的初始数量。在FlatList中，我使用的是Accordion。当我打开FlatList时，它显示了许多手风琴，尽管我确实有一个带有两个标题的手风琴。我正在使用react原生.This是我的手风琴内容：
const SECTIONS = [
{
title: 'First',
content: 'First World',
},
{
title: 'Second',
content: 'Second World',
},
]；
这是我的FlatList
ret
浏览 25提问于2019-11-01得票数 1
如果secondFlatlist直接呈现，它将导致以下结果。
如果secondFlatlist呈现在另一个flatList中，则flexDirection: row无法应用。
如何在FlatList中连续显示“一”、“二”、“三”？
我的代码：
import * as React from 'react';
import { Text, View, FlatList } from 'react-native';
export default function App() {
const SecondFlatlist = () =>
浏览 2提问于2022-05-06得票数 0
回答已采纳
我有一个看起来像这样的FlatList
<FlatList
horizontal={true}
data={this.state.mydata}
renderItem={({ item }) => (
<View>
<Text>{item.name}</Text>
<Button onPress={()=>"HOW TO SEE Details? } title="See Details"/>
</View&g
浏览 0提问于2018-01-16得票数 0
下面的代码显示FlatList内部API中的帖子列表。FlatList工作并显示我所有的帖子，但是我试图通过使用filterCrime状态的选择器来过滤基于类别的帖子。
下面是我的当前状态，它显示posts，并具有正确设置filterCrime状态的选择器。
constructor(props) {
super(props);
this.state = {
loading: true,
data: [],
page: 1,
refreshing: false,
filterCrime: ''
浏览 3提问于2019-09-18得票数 0
我在构造函数中设置了flatlist的数据，并在componentDidMount方法中调用flatlist scrollToEnd，我认为它应该滚动到end，但它没有。我单击一个按钮调用scrollToEnd方法，flatlist滚动到end。 所以我想知道什么时候我应该调用flatlist的方法来改变它，而不需要点击。 ?
浏览 10提问于2019-01-03得票数 0
回答已采纳
我从Api获取数据并将其显示在FlatList中，但我只想向用户显示有限的字符串，而不是我从Api获得的整个文本。
下面是我从服务器上得到的示例文本。
"Text": "Apu Nahasapeemapetilon - Apu Nahasapeemapetilon is a recurring character in the American animated television series The Simpsons."
在这里，我只想在-之后显示数据直到-，我不希望在Flatlist.Is中显示这么长的数据，有任何方法可以在- sign之前获取文本。
浏览 6提问于2021-06-01得票数 0
回答已采纳
1回答
我只想获取数据，我在我的应用程序调用的数据，它运行得很好，但为什么我要得到所有不必要的部分，如何删除，谢谢您的支持。请检查数据库图像，并显示输出图像如何显示。我不希望那些标记为红线的部分，因为我没有在代码中调用它们。是FlatList问题还是Firebase问题？
import React, { useState, useEffect } from 'react';
import { ActivityIndicator, FlatList, View, Text } from 'react-native';
import {firebase} from
浏览 1提问于2022-08-27得票数 1
回答已采纳
我有一个名为outcome的条目，其中包含了来自服务器的data = Won、Lost、Void或null。现在我把它们全部呈现出来。我只想在这个FlatList/ListItems屏幕中减少/呈现null。
在这里，代码：
<FlatList
data={this.state.doctorsList}
keyExtractor={item => item.signal_id.toString()}
renderItem={({
浏览 0提问于2018-09-04得票数 1
回答已采纳
我找不到输入FlatList的方法
export interface Category {
id: string;
title: string;
bg: string;
}
export const CATEGORIES: Category[] = [
{ id: "c1", title: "Italian", bg: "#f5428d" }
];
const Item = ({ data }: { data: Category }) => (
<View style={styles.item}>
浏览 0提问于2021-07-28得票数 2
1回答
我有多个选项卡，其中三个选项卡中有一个FlatList组件，我需要在其中搜索项目。现在，在我的Header中，我想要创建一个SearchBar，并能够执行一个API调用来获取用户搜索的内容，并在FlatList中显示结果。我使用的是react导航/native^5.7.1。
浏览 4提问于2020-10-24得票数 0
回答已采纳
我使用FlatList来显示搜索结果。 <View>
<FlatList
data={this.state.films}
keyExtractor={(item) => item.id.toString()}
renderItem={({item}) => <FilmItem film={item}/>}
/>
</View> 但是，当用户开始第二次搜索时，此列表不会重新开始到索引0。因此，我想添加ScrollToIndex或viewPositi
浏览 43提问于2020-04-28得票数 0
回答已采纳
我正在尝试通过FlatList来显示JSON的元素。在renderItem()中，当我试图访问每个项的密钥时，什么都不会输出。因此，我尝试只呈现每一项，我的FlatList每一行显示一个字符。我已经查看了FlatList的文档，所以在将数组作为数据传递给FlatList之前，我不确定是否需要调整数组。
以下是我的JSON的格式(目前应该只有一个元素)：
data: (JSON array)
[
{ "myAvail":19,
"my_ID":"10204166655843580",
"f
浏览 0提问于2018-03-21得票数 1
如何放置数组的第一行？
"id":"1"，" Name“:"Some”，"bal":"1000“
在<Text>{name} {balance}</Text>中，然后在<FlatList />中的其他2行。我可以通过获取数组来显示FlatList或文本，但不能同时显示两者。如果我做了另一个屏幕，将第一行放进去，然后在第二个屏幕中导入，我就能够显示所需的结果。但是，我认为有一种更好的方法可以在单屏幕上分割这个数组，并显示文本和FlatList。谢谢。
[
[
{
浏览 1提问于2019-10-29得票数 0
回答已采纳
假设我有一个如下的FlatList组件， <FlatList
ref={ref => this.flatListRef = ref}
data={this.state.data}
renderItem={({ item, index }) => this.renderLeaveRequests(item, index)}
keyExtractor={item => `${item.id}`}
onEndReached={this.loadMore}
/> 我希望FlatList转到一些基于offset的特定项目，我实现
浏览 14提问于2020-07-27得票数 0
我试图使用一个FlatList支柱来呈现一个ListHeaderComponent组件，但是当我添加ListHeaderComponent时，FlatList就会显示出以下错误。
下面是Discover的render()函数：
render() {
renderFlatListItem = (event) => {
return (
<Event
description={event.Description}
startTime={event.StartTimeToString}
Location={ev
浏览 0提问于2017-06-07得票数 1
回答已采纳
我对FlatList和VirtualizedList之间的区别感到困惑。
所以,
FlatList 和 VirtualizedList 有什么区别？
我应该什么时候使用?
浏览 0提问于2018-06-19得票数 9
伙计们，日安。我正在尝试在"AppIntroSlider“中实现”react-native-app-intro slider“的水平滑动。
import AppIntroSlider from 'react-native-app-intro-slider';
我浏览了这个包的npm，我看到它使用水平滚动FlatList来水平滚动多个页面。在每个页面中，我都显示了简短的介绍文本和python的代码片段，这些代码片段在水平方向上不适合屏幕。问题是我不能在这个FlatList项目/页面中水平滚动这个代码片段。
下面是一段代码：
<ScrollView nestedScr
浏览 2提问于2020-02-03得票数 0
我正在学习使用Flatlist。我可以使用Flatlist显示嵌套在数组中的对象的键的值。
但是，我不能将Flatlist用于一个简单的数组。
例如：
const arrayOfLetters = A，B，C，D，E
如何使用Flatlist将arrayOfLetters显示为
ABCDE
浏览 4提问于2022-03-06得票数 0
回答已采纳
我想使用getParam (在屏幕之间传输数据)从数组中创建一个列表。最终结果应该如下所示：
WiosłaDeskaPodciąganie
现在我正在使用文本，可能它可以由FlatList工作(但没有显示)
代码：
import React, {useState} from "react";
import { Button, StyleSheet, Text, View, Pressable, FlatList, TouchableOpacity } from 'react-native';
import { globalStyles } from ".
浏览 2提问于2022-01-21得票数 0
我想在FlatList中实现条件渲染，所以我使用了下面的逻辑。这是FlatList的代码。 <View style={styles.container}>
<FlatList
data={Object.keys(props.results)}
numColumns={3}
extraData={Object.keys(props.results)}
keyExtractor={(item, index) => '
浏览 52提问于2020-04-29得票数 0
回答已采纳
因此，我们有一个平面列表，大约有200/300个按钮，这些按钮被传递给一个函数，在5次点击后显示一个广告。因此，我们使用useState来计算单击次数。
但是..。因为我们更新了函数中的计数，所以它再次调用selfs，并重新排列所有平面列表项目/按钮，并导致滞后/延迟。
“您的滞后是什么意思？”例如，通常可以垃圾邮件点击按钮，这一切都很好，但是当setCount(prev => prev +1)被取消评论时，它只是缓慢地冻结和落后。
码
import React, {useCallback, useState} from 'react';
import {Touchabl
浏览 2提问于2020-10-20得票数 1
我正在使用FlatList创建一个可选择的列表，以突出显示/勾选所选的每一项。
在index.js上，我以这种方式使用该组件：
<SelectableList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={(item) => <Text>{item.key}</Text>}
/>
在可选择的list.js上，我将列表定义为：
renderItem = (item) => {
return (
<View>
<Te
浏览 2提问于2017-07-12得票数 0
回答已采纳
我目前正在关注，但在从获取json对象并将其显示在FlatList中时遇到了问题。下面是我的代码：
import React, { Component } from 'react';
import {FlatList, ActivityIndicator, ListView, View } from 'react-native';
import { Card, CardItem, Text, Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon
浏览 1提问于2017-06-19得票数 0
我能够对从randomuser.org数据集中提取信息的FlatList进行硬编码。然而，我完全无法从我的Firestore数据库中提取任何数据-它只在Expo中显示一个空白页面，没有任何错误警告。我已经在这个问题上坚持了几天了，我搜索得越多，我似乎就越困惑！我是编程新手，所以如果这是一个非常基本的问题，我很抱歉。我只在App.js文件中使用FlatList来保持代码的简单性--但是只要我试图从Firestore返回数据，不管我做什么，它都是空白的。谢谢
浏览 6提问于2021-03-02得票数 0
我正在设置一个FlatList，希望它能显示我的组件。我创建了一个包含我的组件的函数"renderEpisodes“，我想在FlatList中传递这个函数，它将显示包含在其中的所有详细信息。 这是我的包含所有代码的FlatList import React, { Component } from 'react';
import { ScrollView, FlatList, Text, View, Image } from 'react-native';
import axios from 'axios';
import Episode
浏览 28提问于2019-04-03得票数 2
JSON结构：
sectionItems={key: ..., name: .., title: ..listOf 20 nested data }
data =
{
"sections": [...sectionItems of 50 items]
}
When displaying in the FlatList its rendering too slow,
<FlatList
renderItem={({item}) => <Section item={item} />}
initialNumToRender={l
浏览 0提问于2019-01-12得票数 0
使用ResiveNative0.64，我想显示一个图像，后面跟着评论，就像instagram一样。
以下是我所做的简化工作(图像的样式和注释都管理得很好，我不把代码放在不污染问题的地方)：
import {
Image,
FlatList,
View
} from 'react-native'
const Post = () => {
...
return (
<View>
<Image ... />
<FlatList
data={comments.filter(ite
浏览 3提问于2021-05-21得票数 1
回答已采纳
我有一个FlatList，奇怪的是只有在滚动之后才能正确地呈现。另外，在刷新时，它会呈现为一秒，然后再次消失。FlatList本身只有3项。
FlatList在视图中的定义如下：
<View style={{flex: 1}}>
<FlatList
data={cartItems}
renderItem={({item}) => (
<CartItemCard
event={item.event_name}
ticketType={item.title}
浏览 0提问于2021-12-03得票数 0
回答已采纳
我已经创建了flatList，并且正在传递对象数组。每个对象都有标题和数据数组。在renderItem of FlatList中，我试图显示文本，即标题，但它将错误作为null。如何使用flatList显示数据，也就是说，我希望显示每个对象数组中的标题和数据键。
示例数据：
代码：
<FlatList
data={specificationsData}
showsVerticalScrollIndicator={false}
renderItem={({item}
浏览 0提问于2018-10-22得票数 2
回答已采纳
我的组件使用本机基，所以情况是我有DropdownBox/Select，然后是FlatList，但是我希望FlatList滚动是跟随父滚动视图滚动，所以如果我滚动FlatList，那么当列表滚动时，DropdownBox会移动，但是我的列表甚至不会滚动，我不知道为什么。
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ width: "100%", alignItems: "center" }}
>
<Stack flexWrap={
浏览 23提问于2022-09-19得票数 -1
我正在尝试使用Flatlist实现自定义的拉式刷新指示器，我需要该列表在负位置滚动以显示顶部的指示器，但是scrollToOffset将我滚动到顶部，而不是y=0。
handleRelease() {
if (this.state.readyToRefresh) {
this.flatList.scrollToOffset({ offset: -130 });
}
}
<FlatList
ref={(flatList: any) => {
this
浏览 6提问于2019-09-29得票数 1
回答已采纳
我有一个对象列表，我想在FlatList中显示这些对象。列表项还应该有一个开关来选择或取消选择条目。但是每次我点击开关，状态就会保持不受检查。我不知道这是ListItem组件的错误还是我的代码中的错误。onValueChange事件被正确触发，但在更改状态或数据集未被更新后，FlatList似乎没有被重命名.
以下是我的课程：
class Person {
constructor() {
this._name = '';
this._selected = false;
}
getName() {
return this._name;
}
浏览 0提问于2019-04-18得票数 3
回答已采纳
我已经用Flatlist制作了一个图像网格。我正在从网络上加载图像。目前，我一导航到那个特定的页面，所有的图像都会被加载。我想要的是只加载那些在屏幕上可见的图像，并在滚动上休息。屏幕上一次显示六个图像。
是否可以在Flatlist中加载卷轴上的图像？
浏览 1提问于2017-11-10得票数 5
我创建了VenueList组件。我想在react原生应用程序中使用FlatList组件显示列表。我收到错误:不变冲突试图获取超出范围的帧索引(见截图)。
代码：
VenueList.js：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-red
浏览 27提问于2018-09-04得票数 6
回答已采纳
2回答
因此，我正在开发一个react原生项目，并创建了一个模式。此模式显示选定和未选定的任务。现在，我创建了一个包含两个平面列表的视图，如下所示：
<View style={styles.tasksListContainer}>
<FlatList
data={tasksToShow}
renderItem={(itemData) => {
if (!itemData.item.usedUp) {
return <TaskIsNotBeingUsed itemData={itemData} onTaskSelect={on
浏览 0提问于2021-04-07得票数 0
我正在使用React本机的FlatList组件。当用户在Android上滚动FlatList时，不显示“显示项目.到. of .”
在iOS上，带有画外音的滚动会给出反馈(显示y的页面x)。
我想知道这是否是反应本地FlatList方面的一个空白？还是我错过了一些设定？
浏览 0提问于2018-04-05得票数 8
回答已采纳
我希望在我的本地应用程序中实现无限滚动特性，包括使用Flatlist向用户显示多个存储库的结果。为了实现这一点，我尝试使用Flatlist中的onEndReached支柱来调用GraphQl来获取下一组存储库。因此，在我的FlatList组件中，我输入了以下内容：
render(){
return(
<View style={{flex: 1}}>
<FlatList
data={this.props.repositories}
renderItem={this.r
浏览 1提问于2021-02-18得票数 0
我有一些JSON数据，如下所示：
{
"distance":"1",
"name":"whatever",
"listPriority":"1",
}
我要把这个传给Flatlist
<FlatList
key={'my-list'}
data={JSON}
renderItem={this.renderCard}
浏览 0提问于2019-03-28得票数 0
我有一个RN (0.44.2) mobx (3.1.10)应用程序，它使用FlatList。我基本上是在跟踪
当使用我自己的商店(与示例相反)时，我不得不使用toJS()来使FlastList呈现
// renders list
<FlatList
data={this.props.giphyStore.images.toJS()}
keyExtractor={(_, i) => i}
renderItem={({ item }) => <Text>found the data</Text>}
浏览 5提问于2017-05-29得票数 1
回答已采纳
1回答
其目标是允许用户将关键字输入搜索栏，将搜索单词或短语存储在字符串中，并向电影服务器发送post请求，并以FlatList格式显示结果。
我不擅长javascript，但到目前为止，我能够将搜索输入存储到一个变量中，并通过控制台记录搜索结果来确认它，但是使用该变量来呈现和显示结果令人困惑。
import React, { Component } from "react";
import {
View,
Text,
FlatList,
StyleSheet
} from "react-native";
import { Container,
浏览 0提问于2019-02-24得票数 3
回答已采纳
1回答
我想知道我可以测试什么动画组件的反应-本机与玩笑。
我试过在组件下面测试..。
( UIComponent... )
<Animated.FlatList
ref={ref}
data={events}
onScroll={onScroll}
... and so on other attribute ...
/>
( test code... )
describe('test', () => {
it('test', () => {
const mocked
浏览 1提问于2021-04-29得票数 3
2回答
我有一个名为getRecados()的异步函数，它连接到firebase并获取我需要我的平面列表呈现的所有数据：
const getRecados = () => {
setRefreshing(true)
try {
const recadosRef = firebase.firestore().collection('recados');
recadosRef.orderBy('timestamp', 'desc').get().then(snapshot => {
cons
浏览 28提问于2021-11-30得票数 4
我正在尝试创建动态复选框，名称从json获取，看起来和我需要的一样，但是如果没有代码解释，我无法归档我的目标，
我有一个这样的json例子：
this.state = {
data : [
{
"name": "ALL",
},
{
"name": "Android",
},
{
"name": "iOS",
},
{
"name": "React Native",
}
]}
下面的代码如下：
<
浏览 0提问于2018-03-20得票数 2
1回答
上下文：
我正在使用"expo“来处理”react本地“，并且我有一个倒置的"FlatList”，它呈现一个从1月到12月的月份的“数组”。
请求：
在将列表显示给用户之前，列表应在当前月份集中显示。
现状：
我使用"FlatList“"scrollToOffset”属性来执行此请求，当列表接收到“数据源”时，会自动触发"this.flatList.scrollToOffset“语句，列表会动画滚动和聚焦特定项。但是我有一个问题，这个动画是一个突然的动作，破坏了UX。
需要：
你能帮我找到解决这个问题的办法吗？我需要做同样的，但用户看
浏览 0提问于2019-02-13得票数 3
我正在开发一个react原生应用程序，其中我出于某种目的使用了FlatList。我有一个通过FlatList显示的项目列表。该FlatList将返回我创建的一个组件，并最终显示这些项。 const [allAmen , setAllAmen] = useState({});
let arr = [];
const test = (uName) => {
setAllAmen({...allAmen , "name" : uName })
}
arr.push(allAmen);
console.log(arr);
<FlatList
浏览 11提问于2020-04-17得票数 2
回答已采纳
我想更改<FlatList />的宽度和高度。 我将height样式设置为当前的<FlatList />，但它从未起作用。 我不能改变<FlatList />的高度。 这是我的render()函数和样式。 render() {
const listData = [];
listData.push({ key: 0 });
listData.push({ key: 1 });
listData.push({ key: 2 });
listData.push({ key:
浏览 192提问于2017-11-28得票数 32
回答已采纳
我使用React原生平面列表，其中我已经将排序数组传递到data props.Now中，我希望根据代码的日期显示项：
<FlatList
horizontal={true}
keyExtractor={(item, index) => index.toString()}
data={this.state.Data}
renderItem={({ item }) =>
<View>
<Image source = {{uri: item.image}}/>
<Text>{item
浏览 3提问于2018-09-21得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
