FlatList呈现数组的顺序错误
基础概念
FlatList 是 React Native 中的一个组件，用于高效地渲染大量数据。它类似于 HTML 中的 ul 或 ol 列表，但具有更高的性能优化。FlatList 通过只渲染屏幕上可见的元素来减少内存使用和提高性能。
相关优势
- 性能优化：只渲染可见元素，减少内存使用。
- 支持分页加载：可以通过
onEndReached回调实现分页加载。 - 支持多种数据渲染：可以渲染复杂的数据结构，如嵌套数组。
- 支持滚动性能优化：通过
getItemLayout和initialNumToRender等属性进一步优化滚动性能。
类型
FlatList 主要有以下几种类型：
- 普通列表：最基本的列表形式。
- 分段列表：通过
renderSectionHeader和renderSectionFooter实现分段显示。 - 虚拟化列表：通过
getItemLayout和initialNumToRender进一步优化性能。
应用场景
- 新闻列表：显示大量新闻文章。
- 商品列表：电商应用中的商品展示。
- 聊天记录：聊天应用中的消息列表。
问题分析
FlatList 呈现数组的顺序错误可能是由于以下原因：
- 数据源顺序错误：传入
FlatList的数据源顺序不正确。 - 排序逻辑错误：在渲染前对数据进行了错误的排序操作。
- 异步数据加载：异步加载数据时，数据顺序被打乱。
解决方法
1. 检查数据源顺序
确保传入 FlatList 的数据源顺序正确。
const data = [
{ id: '1', title: 'Item 1' },
{ id: '2', title: 'Item 2' },
{ id: '3', title: 'Item 3' },
];
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>2. 确保排序逻辑正确
如果在渲染前对数据进行了排序操作，确保排序逻辑正确。
const sortedData = data.sort((a, b) => a.id.localeCompare(b.id));
<FlatList
data={sortedData}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>3. 处理异步数据加载
如果数据是异步加载的，确保数据加载完成后正确排序。
const [data, setData] = useState([]);
useEffect(() => {
fetchData().then((response) => {
const sortedData = response.sort((a, b) => a.id.localeCompare(b.id));
setData(sortedData);
});
}, []);
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>参考链接
通过以上方法，可以有效解决 FlatList 呈现数组顺序错误的问题。
相关·内容
我很好奇map/filter/reduce是否会对性能有害。
假设我有一个Flatlist(ListView)，它的数据是数组的映射/过滤器的结果。
其他状态的更改调用呈现时，数组值不更改。然后，AFAIK，map/filter创建一个新的对象，即使数组中的值没有改变。
当时，Flatlist(ListView)实际上重新绘制了整个列表？或者调用render，而ListView没有发生什么变化？
我希望它足够明智，这样它就不会重新绘制ListView了。
浏览 2提问于2018-04-09得票数 0
回答已采纳
在react原生中，FlatList和ScrollView的结构有什么不同？
对于应用程序中的滚动视图，它们似乎是相等的，但是ScrollView非常简单，而不是FlatList，那么当我们必须在代码中使用FlatList时呢？
浏览 3提问于2019-03-20得票数 35
回答已采纳
通常，我能够在Flatlist中呈现一个对象数组，但由于某种原因，这次我不能。我得到了一个错误，“不变的违反:对象作为一个反应子的无效.”有人知道为什么会这样吗？
<FlatList
data={allergins}
keyExtractor={(allergin, index) => index}
renderItem={({allergin}) => (
this.renderAllergins(allergin)
)}
/>
浏览 0提问于2018-08-22得票数 0
回答已采纳
问题是我不能让它工作，时间似乎混乱了，传递给FlatList的数组总是空的。
const [expanded, setExpanded] = React.useState(false);
var searchHistory = [];
const _retrieveData = async () => {
try {
const value = await AsyncStorage.getItem('searchHistory');
if (value !== null) {
searchHistory = J
浏览 0提问于2021-04-28得票数 0
我将一个数组传递给一个FlatList，但是我得到了一个错误：
“不变冲突:对象作为React子对象无效(找到:键{id、customer等的对象，等等)。
我试过把托槽放在物品周围，然后把它们移除，但没有效果。有人知道如何修复这个错误吗？
renderSearches = () => {
if (this.state.products.length) {
return (
<View style={styles.suggestionContainer}>
<FlatList
浏览 0提问于2018-05-18得票数 1
回答已采纳
我有一个FlatList和一个data道具从Redux拉出来
render() {
return (
<View>
<FlatList
data={this.props.arrayOfPlacesFromRedux}
renderItem={({item}) => {.......
每当我将更改发送到arrayOfPlacesFromRedux(即添加或删除子程序)时，arrayOfPlacesFromRedux就会从数组中删除所有子元素(即使长度为零)。
当arrayOfPlacesFro
浏览 6提问于2022-02-13得票数 2
回答已采纳
我使用Reactinative并使用组件ref构建了一个自动生成的Flatlist来访问scrollToIndex方法。
所有操作都很好，直到我打开SideMenu，这会导致flatList.current变为null，从而导致应用程序错误。
我想知道有没有人知道为什么会发生这种事？感谢你的帮助。谢谢
App.js
import React, {useState} from 'react';
import { StyleSheet, Text, Image, View, SafeAreaView, ScrollView } from 'react-native'
浏览 3提问于2022-01-08得票数 0
回答已采纳
2回答
我有一些UI如下所示：
这些列表项目可以是：(1)添加，(2)删除，(3)重新排序。
重新排序不是拖放，而是在单击check/空圆圈图标时发生--选中的项目总是位于列表的顶部。
在React原生()中，有许多从列表中添加/删除项目的动画示例。
但是，我怎样才能使列表的顺序变得生动呢？特别是在我的例子中，它将是两个列表项交换位置。
我见过和其他几个开源项目，但我认为这可能是过火了，因为我不需要拖放。另外，我已经链接到了一些FlatList事件，如onLayout、onContentSizeChange和onScroll，所以我更喜欢一种允许我直接为FlatList的子级动画化的解决方案
浏览 0提问于2018-04-05得票数 2
回答已采纳
我在render()函数中有一个引用，
<FlatList
ref={(ref) => { this.flatListRef = ref }}
data={this.state.data}
renderItem={({ item, index }) => this.renderOuterCard(item, index)}
/>
我需要使用this.flatListRef来调用FlatList's方法，这只有在呈现FlatList时才有可能。否则会发生错误，
无法读取未定义的属性“ScrollToIndex”
(我试图调用FlatLi
浏览 8提问于2020-02-12得票数 3
回答已采纳
我的应用程序中有一个数组completedTests，其内容的一个例子是(当我使用console.log()时)：
Array [
Object {
"difference": 140,
"id": "Practice Test 3",
"targetReached": false,
"testScore": "1400",
}
]
要显示其内容，我将使用：
<View>
<FlatList
data={completedTests}
浏览 2提问于2021-05-17得票数 0
回答已采纳
我不理解在某些情况下需要使用useEffect来进行操作，例如，在呈现之前。例如，在下面的代码中，我想用信息填充数据，例如，通过接收API。现在，以下代码的区别：
const Product_List = (props) => {
const [data, setData] = useState();
getData((response)=> setData(response));
return(
<FlatList
data={data}
/>
)
}
使用以下代码：
con
浏览 3提问于2021-08-25得票数 2
回答已采纳
我在我的主组件中有两个部分。一个部分保存一个FlatList，另一个部分显示FlatList接收的对象中的值的总和。我的主要组件如下所示：
return (
<View>
<FlatList
data={[{a:1,b:2},{a:3,b:4}]}
renderItem={({item})=><View>{item.a}</View>}
/>
<View>**SUM OF a(i.e 1+3=4)**</View>
</View>
)
我不能在我的第二个视图中显示所有a
浏览 0提问于2017-12-21得票数 0
3回答
我正在制作一个使用react native的应用程序，它具有聊天功能。我的FlatList颠倒了，除了消息的顺序之外，一切都很顺利，我希望我的聊天(每隔一次聊天)向我显示最后的消息，而不是旧的消息。
下面是我的渲染代码：
<View style={styles.messages}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<FlatList
ref={(c) => { this.flatList = c }}
浏览 0提问于2018-05-04得票数 6
回答已采纳
我用平板表来显示数据，作为回应，我得到了一些数据。
但是，json响应字符串是以{}大括号开始的，而不是从[]括号开始的。
因此，在错误之下：
不变违规:尝试获取超出范围的索引Nan的帧。
做完日志后，我在我的dataSource of FlatList is [Object Object]中得到了什么
我在postman和它的类似项中检查了json响应：{{[[]}}，简而言之，它不以[]括号开头。
因此，我在这里有点困惑，即FlatList必须有以[]括号开头的dataSource或json响应。
如果没有，那么错误会有什么问题呢？如果是，我如何以所需的格式转换它？
谢谢。
编辑
这样做：
浏览 2提问于2018-08-01得票数 0
回答已采纳
我在使用FlatList时有两个问题(这两个问题都适用于ListView)。
我有一个列表，它通过显示属性显示每个项，然后在我的FlatList中签入，如下所示：
<FlatList
ref='flatList'
data={this.state.dataSource}
enableEmptySections
renderItem={({item}) => item.display && <Text>{item.text}</Text>} />
但是，当我更改display属性时，它不会显示。这在List
浏览 6提问于2017-06-07得票数 4
回答已采纳
我有一个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
回答已采纳
2回答
使用本机使用类型记录和redux工具包
嗨，我很麻烦通过FlatList呈现一个消息列表。通过ScrollView，一切呈现良好，但我需要实现infiniti滚动。所以我在做这样的事情
const MessagesScreen = () => {
const companyId = useAppSelector(getCompanyId);
const userId = useAppSelector(getUserId);
const {
data: messages,
isLoading,
refetch
} = useGetMessagesQ
浏览 22提问于2022-05-20得票数 1
回答已采纳
2回答
我有下面的对象，我正在从AsyncStorage中检索，我想在FlatList中显示它，但是我得到了以下错误：
不变违反:尝试获取超出范围的索引NaN的帧
我的JSON格式是：
Object {
"44": Object {
"pro_id": "44",
"pro_img": "url",
"pro_name": " S4 ",
},
"52": Object {
"pro_id": "52"
浏览 2提问于2018-10-16得票数 1
我正在使用React Native构建一个移动应用程序，其中一个页面中有一个ScrollView。
问题是我在这个页面中有一个FlatList，所以当我转到那个页面时，我得到了这样的错误:问题是，我将ScrollView nestedScrollEnabled设置为true，我还将FlatList's scrollEnabled设置为false，因为我并不真正需要那里的滚动条(我使用它来呈现来自枚举的项)，所以我认为这应该可以修复错误，但错误仍然存在。
它看起来是这样的：
<ScrollView showsVerticalScrollIndicator={false} neste
浏览 3提问于2021-06-22得票数 1
2回答
响应本地FlatList项的消失
、、、、
我有一个模式，用户从其中选择类别，然后将该类别加载到其配置文件页面上的FlatList中。当选择第一个类别时，它正确地加载所需的格式：
当用户从Modal中选择并添加第二项时，项目将消失，如下所示：
当添加第三项时，将提示此错误：
码
用户正在从中选择的类别数组，并且钩子状态：
const [catData, setCatData] = React.useState([])
const [catsSelected, setCatsSelected] = React.useState([])
const categoryData=[
{
id:
浏览 8提问于2022-05-13得票数 2
回答已采纳
1回答
具有异步组件的Redux
、、、、
我目前正在开发一个React本地移动应用程序。
我想在FlatList中显示来自数据库的数据，但到目前为止出现了两个问题：
如果数据尚未被获取，则I不能mapStateToProps，如果数据尚未显示，则FlatList组件在加载时会抛出一个错误
我已经尝试创建一个加载支柱，它将在组件挂载时立即被设置为true，并将“取消”需要数据的函数；但是，到目前为止，这还没有起作用。
import React, { Component } from "react";
import { View, Text, Button, FlatList } from "react-nativ
浏览 2提问于2020-04-30得票数 0
回答已采纳
我将一个ref传递给一个FlatList，并期望访问scrollToIndex()函数，但是它不会出现在控制台中，当我试图使用它时，它会抛出一个错误："scrollTo()不是一个函数“，它甚至不承认我试图使用scrollToIndex()。
这是我的代码中使用的一个简单示例：
const ref = useRef()
ref.current?.scrollToIndex({index:itemIndex,animated:true})
<FlatList ref={ref} .../>
有没有人经历过这样的经历，并知道如何让它发挥作用？我已经查看了文档和示例
浏览 8提问于2022-04-10得票数 0
回答已采纳
据我所知，FlatList extraData属性用于在组件发生更改时重新呈现组件。
所以，想象一下这个例子：
import React from 'react';
import { View, TouchableOpacity, Text, FlatList } from 'react-native';
export default function App() {
const [selectedId, setSelectedId] = React.useState(null);
const items = [
{
id: &#
浏览 3提问于2021-11-11得票数 1
我有一个Stack.Navigator，当我导航到包含我的FlatList的页面时，它一次呈现4x6项，所有其他组件都将呈现，扁平列表将不可见/不呈现。然后应用程序锁定，然后扁平列表呈现所有项目，布局被颠簸，这是不可取的。这是意料之中的行为吗?我能做些什么？我更喜欢整个应用程序冻结/卡顿，直到所有的第一个页面都准备好一次显示，而不是渲染除了Flatlist之外的所有东西，然后到处颠簸UI。 据我所知，FlatList组件是非常没有争议的。 <View>
<FlatList
numColumns={4}
co
浏览 18提问于2020-10-31得票数 0
我最近开始使用react-native，并且偶然发现了FlatList组件。在使用react时，我总是使用带数组的map。
我使用的是FlatList，但当我想要更改FlatList中项目的flex-direction时出现了问题，所以我又使用了map。
下面是使用这两种方法的两个示例：
map
{
this.state.images.map(image => {
return (
<UsersImage key={ image } source={{ uri: image }} />
)
})
}
FlatL
浏览 2提问于2018-01-05得票数 19
回答已采纳
我试图从API中呈现值，如果我对值进行控制台，我可以看到数组，但无法从Flatlist中看到它。
API提取线在这里
我想这就是我犯错误的地方
控制台输出阵列
帮帮我，
浏览 9提问于2022-02-14得票数 0
回答已采纳
我对在FlatList组件中呈现数组json数据提出了异议。我通过web和堆栈溢出搜索了大量的文档和信息。这里有几个我看过的网页链接。但我想不出来。
这是我的密码；
//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
浏览 1提问于2018-11-20得票数 0
回答已采纳
我重构代码以使用useEffect钩子，而不是使用类，但是在刷新结果时出现了内存泄漏。我确实使用了useEffect，但仍然收到一条错误消息，不知道我的代码在哪里出错。
我得到以下错误：
警告:来自useState()和useReducer()钩子的状态更新不支持第二个回调参数。若要在呈现后执行副作用，请使用useEffect()在组件体中声明它。
import React, { useEffect, useState} from 'react';
import { FlatList, View, TouchableHighlight } from &
浏览 2提问于2020-05-16得票数 0
回答已采纳
我在考虑如何在平面列表中使用
如果我使用：
import Seperator from '../Seperator';
<FlatList
ItemSeparatorComponent={() => <Seperator />}
data={this.props.x}
renderItem={({ item }) => this.renderX(item)}
/>
我可以像下面这样使用<Seperator />吗？
import Sepe
浏览 1提问于2019-02-27得票数 3
回答已采纳
1回答
我正在使用Flatlist在我的购物车中显示项目。当购物车为空时，我使用ListEmptyComponent显示空购物车消息。当我的ListFooterComponent为空时，如何隐藏FlatList？
return (
<View style={styles.mainscreen}>
<View style={styles.cartScreen}>
<FlatList
data={cartItems}
keyExtractor={(item) => item.productI
浏览 1提问于2020-06-24得票数 0
回答已采纳
我创建了一个函数，用于从接收相关ID号作为输入的服务器获取照片，如果有与项目相关的照片，该函数将返回类似200的响应代码。否则，如果响应代码为400或404，则应返回null。但是，当我在我的RenderItem组件的FlatList组件的JSX元素中调用函数时，如果检查返回的值是否为null，就有点工作了。它将显示所有列表项的组件，而不是实际有照片的组件。下面是我的FlatList组件的呈现项代码的一部分，它调用函数：
{this.myGetPhotoFunction(item.IDVALUE) !== null ? (
<View styl
浏览 2提问于2020-03-08得票数 0
1回答
我是新的反应-本地人，目前正在建立一个聊天功能到我的应用程序。为了可视化使用FlatList的聊天(在我使用Scrollview之前，但是在使用FlatList时，我有更好的多项性能)，下面有两个大问题。
随着我编写更多的聊天消息，越来越多的消息被附加到我的聊天消息钩子中。一条消息不是问题，但在2或3之后，整个FlatList开始闪烁并重新加载。如果我附加更多的信息，情况会变得更糟。
当我向数据库发送超过3条消息时，这些消息被防火墙侦听器下载到我的FlatList中，这些条目甚至没有正确地呈现到我的FlatList中。我使用concat在聊天消息状态的末尾添加了，但是FlatList在
浏览 1提问于2021-05-07得票数 1
回答已采纳
下面的代码要循环遍历数组。
export default function App() {
const [x, setX] = useState([
{name:'a'},{name:'b'}
]);
return (
<View >
<FlatList
data={x}
renderItem={(item) => {
return <Text>{item.name}</Text>;
}}
/&g
浏览 2提问于2020-09-13得票数 0
回答已采纳
最初使用setState将数据从API加载到FlatList，并且加载得很好。但我必须执行一些操作，如创建、更新和删除FlatList行。当我尝试向FlatList添加新数据时，数据不会在带有更新的FlatList中呈现，但在API中会更新。
如何在更新到API后重新渲染扁平列表，并将新数据加载到FLatList？
下面是我的代码：
constructor(props) {
super(props);
this.state = {
faqs: [],
}
this.loadFaq();
};
将数据从接口加载到FlatList：
l
浏览 3提问于2021-01-22得票数 3
：已解决 为什么我的平面列表没有显示任何内容？ Filter.js import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, FlatList } from 'react-native';
import pure from 'recompose/pure';
const showFilter = ({ data }) => {
return (
<FlatList
data={data}
keyEx
浏览 31提问于2021-07-24得票数 0
3回答
我已经实现了一个监听我的DB文档的代码，当添加一个新的文档时，应用程序将它作为一个项呈现在我的FlatList上。
我的问题是，每次更新FlatList的数据时，已经呈现的项都会一次又一次地重新呈现.
由于我的原始代码很复杂，所以我构建了一个Snack：
我认为问题在于，我使用现有数组的浅拷贝更新状态，但在添加新项时，我只是为了重新呈现FlatList (我不想重新呈现已经呈现的项)。
谢谢你，我真的很感激你的帮助。
Pd:在我的原始代码中，FlatList的组件扩展了React.PureComponent
我的真实密码
恶臭部分
const [posts, setPosts] = use
浏览 4提问于2020-08-05得票数 4
回答已采纳
当使用带有FlatList的类组件时，我知道要获得重呈现，需要使用extraData{this.state}。
我使用的是带有钩子的功能组件。我有个州
const [selectedGuests, setSelectedGuests] = useState([]);
和一张平底表
<FlatList
data={contactsData}
renderItem={renderItem}
extraData={selectedGuests}
keyExtractor={(item, index) => index.toString()}
>
浏览 5提问于2020-05-27得票数 4
回答已采纳
import React,{Component} from 'react';
import { Flatlist, Text, View} from 'react-native';
export default class List extends Component {
state={
person:[{name:'abhjeet'},{name:'shubham'},{name:'kamal'},{name:'devesh'},{name:'ashu'
浏览 11提问于2020-07-09得票数 0
回答已采纳
我是一个新手，在使用android仿真器开发一个示例聊天应用程序时，我遇到了以下问题。
它显示了错误
Undefined is not an object(evaluating 'this.state.contacts.filter')
在代码行中
let filteredContacts = this.state.contacts.filter(
(contact) => {
return contact.name.indexOf(this.state.search) !== -1;
}
);
这是我正在处理的代码。
浏览 1提问于2018-02-05得票数 0
我声明了一个const，其中包含从另一个页面传递的参数。
const obj = this.props.navigation.state.params.item;
const itemArray = Object.values(obj.name)
现在，我在Flatlist数据中调用itemArray，如下所示。
这是我的传单：
<FlatList
key={this.keyExtractor}
data={itemArray}
renderItem={({item}) => this.renderText(item)}
/>
问
浏览 0提问于2019-03-14得票数 1
回答已采纳
正如我从许多帖子中看到的那样，FlatList多次渲染存在一个巨大的问题，并导致了一些问题。这真的很烦人，到目前为止我还找不到任何解决方案，我猜很多人都有同样的情况。
以下是代码，所以当我发出警报时，看到的不是一个值，而是包含undefined..undefined..real value..undefined的不同值。我也可以这样描述它，当我只放置一个元素(如{item.message} )时，它会呈现双倍，并在..之间留出一些空格。就像总是有一些奇怪的渲染，所以当我在某件事上添加新闻事件时，我在新闻事件中得不到正确的警报值。
如何解决这个平面渲染问题？？
render(){
浏览 3提问于2018-05-09得票数 0
我想用flatlist列出我从Firebase获得的json数据。
我的JSONL
我的代码：
database()
.ref('/DOHOL')
.on('value', snapshot => {
//console.log('User data: ', snapshot.val());
const datas = snapshot.val();
for (const [key, deger] of Object.entries(datas)) {
console.log(`${key}: ${deger}
浏览 8提问于2021-05-23得票数 0
我正在使用redux工具箱方法中的api获取数据。我正在控制台中获取数据，但是我的钩子在页面加载时没有更新。
在这里输入代码
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import { useNavigation } from '@react-navigation/native';
import { Calendar } from 'react-native-calendars';
浏览 1提问于2022-11-17得票数 0
我怎样才能做到类似于Whatsapp聊天屏幕上的类似的约会系统呢？
正如您所看到的，消息按日期在组中，我的意思是它们是按日期分隔的。
下面是我找到的一个更好解释的ScreenShot：
我在FlatList中这样做，同时一个一个地呈现消息。
以下是我所做的
let previousDate = "";
if (index > 0) {
previousDate = moment(this.state.messages[index - 1].created_at).format(
"L"
浏览 1提问于2020-04-15得票数 10
回答已采纳
3回答
我使用的是ReactiveNative0.49。我从firebase获取数据，用户列表users/，这个列表中的每一项都被设置为firebase.database().ref('users/' + userId).set(userInfo) userId是currentUser的uid。
现在我拿回来(在行动中- redux)：
export function getPeople(){
return (dispatch) => {
dispatch(getPeopleRequest());
getData().then(result
浏览 2提问于2017-10-30得票数 6
回答已采纳
我有一个在Flatlist中呈现的产品列表。
然而，我有一个切换按钮，以切换此列表的显示。也就是说，当为真时，它以最低的价格显示项目，当为假时，则显示原始列表。
问题是，当我第一次按下切换按钮时，它会将其状态更改为true，并按价格组织列表。但是，当我再次按下它时，它会将状态更改为false，但它会继续显示按价格排列的列表。
我千方百计地做了这个转变，但我做不到。有人能帮我告诉我哪里出了问题吗？
我的代码：
import Products from '../../produtos';
export default () => {
const
浏览 1提问于2020-04-11得票数 0
回答已采纳
我已经构建了一个FlatList，它允许用户根据标题上的按钮在行或卡视图项之间进行选择。因此，按钮只需要分派一个动作，存储就会被修改，viewMode也会改变( actios和商店的redux)。
好的，问题是重新呈现列表时的性能，因为整个列表必须从头开始呈现，可以看到轻巧的延迟，并且感觉到没有响应。
呈现列表的容器如下所示：
render() {
if (this.props.rowMode) {
return (
<FlatList
data={this.props.items}
renderItem={({ item }) =
浏览 1提问于2018-02-02得票数 0
3回答
我在一个redux减速器中有一个posts数组，我通过我的FlatList的onEndReached支柱来更新它。问题是，每次状态更改时，整个列表都会重新呈现，而不是受影响的post项。
// Posts Feed Screen
const posts = useSelector(state => state.posts)
const renderItem = useCallback(
({ item }) => (
<Post post={item} />
),
[]
)
const keyExtractor = useCa
浏览 6提问于2021-05-17得票数 5
回答已采纳
1回答
我很难正确使用状态对象数组上的.map()来显示元素。这是我的密码
class EventListFront extends Component {
state = {
currentEvent: new event(),
events: new eventList(),
}
...
<View>
{this.state.events.events.map(event => {
<View key={event.id}>{event.title}</View>})}
</Vi
浏览 5提问于2020-04-23得票数 0
我对FlatList和VirtualizedList之间的区别感到困惑。
所以,
FlatList 和 VirtualizedList 有什么区别？
我应该什么时候使用?
浏览 0提问于2018-06-19得票数 9
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
