在react-native中的CRUD之后，FlatList未更新
在React Native中进行CRUD操作后，如果FlatList未更新，可能是由于以下几个原因：
- 数据未正确更新：在进行CRUD操作后，需要确保数据已经正确地更新。可以通过打印数据或使用调试工具来确认数据是否已经更新。
- FlatList未正确绑定数据：在FlatList组件中，需要将更新后的数据正确地绑定到data属性上。确保在进行CRUD操作后，将更新后的数据传递给FlatList的data属性。
- keyExtractor未正确设置：在FlatList中，需要设置keyExtractor属性来指定每个列表项的唯一标识符。确保keyExtractor属性设置正确，以便FlatList能够正确地识别每个列表项。
- renderItem未正确渲染：在FlatList中，需要设置renderItem属性来定义每个列表项的渲染方式。确保renderItem属性正确地渲染更新后的数据。
- 引用问题：如果在进行CRUD操作后，FlatList未更新，可能是由于引用问题导致的。确保在更新数据时，使用新的引用来替换旧的引用，以便FlatList能够正确地检测到数据的变化。
如果以上方法都没有解决问题，可以尝试使用forceUpdate方法来强制刷新FlatList组件。但是，这种方法并不推荐使用，因为它会导致整个组件重新渲染，性能可能会受到影响。
对于React Native中的CRUD操作，可以使用腾讯云的云数据库（TencentDB）来存储和管理数据。云数据库提供了高可用性、可扩展性和安全性，适用于各种应用场景。您可以通过以下链接了解更多关于腾讯云数据库的信息：腾讯云数据库
同时，您还可以使用腾讯云的云函数（SCF）来处理CRUD操作的逻辑。云函数提供了无服务器的计算能力，可以根据需求自动扩缩容，无需关心服务器的运维和管理。您可以通过以下链接了解更多关于腾讯云云函数的信息：腾讯云云函数
相关·内容
1回答
我从firebase获取数据，将数据推入数组并在平面列表组件中呈现项目。我错过了什么？
但是列表只在很短的时间内呈现项目。
import React, { useState, useEffect } from 'react';
import { FlatList, Box } from "native-base";
import { StyleSheet } from 'react-native'
import EventCard from "./EventCard.js";
import { LogBox } from
浏览 6提问于2022-02-24得票数 4
回答已采纳
我正在尝试从我的api restful中获取值，并将其加载到我的扁平列表中。但它不起作用。 import React from 'react';
import {
Platform,
ScrollView,
StyleSheet,
Text,
View,
FlatList,
Row
} from 'react-native';
export default function HomeScreen() {
const highScores = fetch('https://facebook.github.io/reac
浏览 24提问于2019-12-25得票数 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
据我所知，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
有时，我们在es6中加载如下内容：
import FlatList from 'react-native';
但是，有时我们用花括号覆盖这个导入的对象，如
import {'FlatList'} from 'react-native';
请告诉我什么时候应该使用这个括号。
浏览 1提问于2019-05-20得票数 3
回答已采纳
我对使用React Native从API获取数据相当陌生，我正在使用Axios。我试图从一个API中获取类别并将它们列在一个FlatList中，但是它没有加载到屏幕上。以下是我的代码 HomeScreen： import React from 'react';
import {
View,
Text,
FlatList,
StyleSheet
} from 'react-native';
import ApiData from '../src/api/apiData';
const HomeScre
浏览 9提问于2019-12-24得票数 0
回答已采纳
我在主屏幕上显示了一个FlatList，在单击一个FlatList项时，我想导航到Detail组件，并将相关数据传递给detail component.As，我是新的反应本机，我很难实现这个功能，尽管我已经在主screen.FlatList上实现了FlatList，已经在list.js组件下实现了，我想导航到details.js组件。
下面是我的代码：
App.js
import React from 'react';
import {StatusBar, StyleSheet} from 'react-native';
import { NavigationC
浏览 5提问于2021-06-02得票数 0
描述
你好，我对FlatList的反应非常新，我试图在ScrollView中呈现一个FlatList，我在ScrollView中提到这个FlatList应用程序是不恰当的，这可能会导致一些滚动方向的混乱。因此，我搜索了这个问题的解决方案，并发现FlatList有一个FlatList属性来呈现ScrollView中的其他所有内容。我完成了在我的屏幕上实现这个解决方案，但现在它不尊重SafeAreaView的边界，这是非常烦人的，我不想在外部的ScrollView/View组件中添加硬编码的边距/填充。那就不好看了。
目前执行情况
screens/Home.js:
import React fro
浏览 5提问于2022-02-17得票数 2
回答已采纳
1回答
在获取包含connections的json之后，我需要呈现一个FlatList。下面的代码可以正确运行，但renderItem中的travel对象始终为undefined。 import {Text, View, FlatList, ActivityIndicator} from 'react-native';
import React, {useEffect, useState} from 'react';
/**
* http://transport.opendata.ch/v1/connections?from=8575201&to=8503
浏览 6提问于2020-06-12得票数 1
回答已采纳
我尝试做的是将新数据传递给API并在FlatList中显示它。我所有的CRUD方法都在传递，但是在我刷新"App.js“之前，我的FlatList不会显示这些更改。我的"App.js“中的代码(如下所示)包含"delete”方法，该方法正在运行，我的FlatList会立即更新它，我猜这是因为状态是本地的，并且FlatList可以找到它。但是当我使用"PUT“和"POST”方法时，这是在其他组件中声明的，它不会对此做出反应。 我完全是react-native的新手，当涉及到在其中导航时。关于如何解决这个难题，有什么建议吗？ class Fetch ext
浏览 45提问于2021-03-25得票数 1
它的预期功能是，它只删除所单击的一个目标，但出于某种奇怪的原因，它决定onPress删除列出的所有目标。 我正在学习这个教程，https://www.youtube.com/watch?v=qSRrxpdMpVc，我在2:44:45左右卡住了。如果其他人已经完成了本教程，或者可以看到我的问题，请解释一下，我将非常感激。:) 程序 import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
Button,
TextInput,
ScrollView,
FlatLi
浏览 14提问于2019-12-11得票数 0
1回答
在从远程url获取Json数据并试图通过FlatList组件呈现数据时，我不断地获得红色屏幕上的错误“不兼容的接收器映射”。
我强烈认为这与android有关。
Json的反应恰如其分地出现在“反应记录器”中。
我尝试在package.json中添加核心-js: 2.5.2中的“解决方案”，但仍然没有起作用。
HomeScreen.js
import React, { Component } from "react";
import {
Text,
View,
FlatList,
ActivityIndicator,
Platform
} from "
浏览 1提问于2019-06-02得票数 0
我尝试在react-native上使用FlatList的scrollToIndex函数。但是，当我将FlatList切换到createAnimatedComponent(FlatList)时，它的ref变成了undefined。
当我使用FlatList时，有没有办法保留createAnimatedComponent的ref
谢谢您的关心。
浏览 4提问于2018-08-16得票数 1
回答已采纳
当我在onPress组件中运行TodoItem时，我希望执行scrollTo并向下滚动，就像y: height值一样。
但是如果我运行onPress
node.scrollTo不是一个函数<<这个错误发生了
这是我的密码
(TodoList.js)
import React, {useContext, useState, useEffect, createRef} from 'react';
import {FlatList} from 'react-native';
import {
Dimensions,
浏览 3提问于2021-03-16得票数 1
回答已采纳
1回答
状态“提醒”与键“提醒”一起保存到AsyncStorage。现在我需要在每次应用程序启动时从AsyncStorage加载“提醒”和关键“提醒”。然后将其显示在FlatList中。 我怎么能做到这一点？ import React, {useState, Component} from 'react';
import {
StyleSheet,
Text,
View,
SafeAreaView,
FlatList,
} from 'react-native';
import {AsyncStorage} from 'react-nati
浏览 17提问于2020-04-03得票数 1
回答已采纳
在以下方面有何不同：
import { FlatList } from "react-native";
和
import { FlatList } from "react-native-gesture-handler";
浏览 23提问于2022-01-18得票数 6
在最新的react-native命令行界面中，虚拟化列表永远不应该嵌套在Flatlist inside Scrollview中的普通滚动视图中此屏幕UI在过去的版本中运行良好，下面是我的react-native info react: 17.0.2 => 17.0.2
react-native: 0.65.1 => 0.65.1
浏览 82提问于2021-10-13得票数 0
我不能为android构建这个项目。当我运行gradlew assembleRelease时，我会得到以下错误：
未能捕获任务输入文件的快照“：app:bundleReleaseJsAndAsset的”属性“$1”在最新的检查期间。
无法读取路径‘E：\ Native\IRStocks\node_modules\@babel\core\node_mo dules\json5.bin\json5 5’。
这是我的package.json
"dependencies": {
"@babel/core": "latest",
&
浏览 0提问于2018-11-01得票数 0
回答已采纳
我在同一问题上发现了很多问题，但似乎没有一个问题能解决问题。目前，我正在使用redux来获取一个对象数组，操作该数据以匹配SectionList数据reqs，并将其提供给SectionList部分支柱。在RenderItem中，我使用FlatList并输入项目支持sections.data。最后，renderItem in FLatList是一个PureComponent。我尝试过使用shouldComponentUpdate，以及其他人推荐的许多其他支持，但似乎都没有用。SectionList一致地呈现项3次或更多次。这是我的密码：
// SECTION LIST COMPONENT
im
浏览 0提问于2019-06-11得票数 0
由于无法从flatList中删除条目，ApiCard是另一个组件，其中需要的数据项有一个del按钮。
import React, {Component} from 'react'; import { StyleSheet, View, FlatList, Text, TouchableOpacity, SafeAreaView, Button, } from 'react-native'; import ApiCard from './ApiCard';
export default class ApiList extends
浏览 1提问于2021-08-04得票数 0
回答已采纳
我使用的是React原生版本0.43.0，它不支持ListEmptyComponent of FlatList。因此，当列表为空时，我使用ListHeaderComponent来呈现视图，
import React, { Component } from 'react';
import { Text, View, StyleSheet,FlatList } from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.st
浏览 8提问于2017-12-04得票数 33
1回答
我有一个历史上正在进行的战斗与样式-组件，FlatList和类型记录.到目前为止，我已经能够使它与以下几个方面一起工作：
const StyledList = styled(FlatList as new () => FlatList<ItemType>)<CustomProps>(props => ({
.......
}));
这很好，直到我最近做了一个项目升级，它打破了这种方法。我现在有了以下依赖版本：
"typescript": "~4.3.5"
"styled-components": "
浏览 4提问于2022-02-08得票数 4
我正在尝试获得FlatList中的第一个FlatList，以在呈现后获得焦点。我试图使用refs并触发来自useEffect的焦点，但我无法弄清楚。
以下是代码：
import React, {useRef, useEffect} from "react";
import {FlatList, Text, TouchableOpacity, View} from "react-native";
const MyScreen = () => {
const refs = useRef([]);
useEffect (() => {
浏览 4提问于2021-08-28得票数 1
回答已采纳
FlatList组件工作完成如果我点击安卓，它会在安卓中显示，但我必须将绑定值传递到订阅组件中，而不是警报。我是否必须将数据传递到状态中，并将其用作其他组件中的道具？ import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View,Alert } from 'react-native';
export default class FlatList extends Component {
constructor
浏览 15提问于2019-09-04得票数 0
This is my InputItems.js
import React, { useState } from "react";
import { Text, View, StyleSheet, TextInput, Button } from "react-native-web";
function InputItems(props) {
const [inputGoal, setinputGoal] = useState("");
return (
浏览 4提问于2022-02-08得票数 1
我可以记录数据，但似乎不能显示它，屏幕完全空白。我没有收到任何错误，但屏幕上还是什么都没有 import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import firestore from '@react-native-firebase/firestore';
import { FlatList } from 'react-native-gesture-handler';
export default class St
浏览 21提问于2020-09-14得票数 0
回答已采纳
我在一个FlatList中设置了4个maxHeight设置为200的ScrollView。
<ScrollView>
<FlatList/>
<FlatList/>
<FlatList/>
<FlatList/>
</ScrollView>
当我尝试滚动一个FlatList时，它不是滚动，而是ScrollView滚动。我该如何解决这个问题？
全源代码
import { Component, default as React } from 'react';
import { FlatList,
浏览 2提问于2018-06-29得票数 47
回答已采纳
1回答
我正在为一个呈现FlatList的组件编写一些单元测试，我需要模拟一些动作，比如scrollTo和scrollToEnd。
谁知道我怎么才能做到这一点？
我正在使用Jest和Enzyme进行测试。
import React form "react";
import { FlatList } from 'react-native';
import { mount } from 'enzyme';
describe("<FlatList/>", () => {
const callback = jest.fn(
浏览 12提问于2019-08-12得票数 0
2回答
我使用FlatList的第一页是：
import React, { Component } from 'react';
import { View, StyleSheet, FlatList, Text, TouchableHighlight } from 'react-native';
import { StackNavigator } from 'react-navigation';
import MoreInfo from './MoreInfo';
export default class Page1 extends
浏览 5提问于2017-08-10得票数 2
回答已采纳
我需要在我的React-Native应用程序中，在我的FlatList顶部有一个拉力来刷新，同时在那个FlatList的底部有一个拉力来刷新。我可以使用refreshControl在顶部使用它，但我不知道如何将它放在顶部和底部。
浏览 0提问于2017-11-15得票数 1
当我在FlatList内部使用ScrollView组件时，我会看到一个警告：
VirtualizedLists不应该嵌套在具有相同方向的普通ScrollViews中--使用另一个VirtualizedList支持的容器。
在FlatList之前和之后，我使用了许多其他组件，我的屏幕很长。
我试图用SafeAreaView包装内容，但这对我没有帮助，因为在本例中，我无法滚动内容。我还尝试在ListHeaderComponent={SafeAreaView}和ListFooterComponent={SafeAreaView}中使用<FlatList>。
我用：
“反应”："
浏览 6提问于2019-12-16得票数 3
我最近开始使用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
回答已采纳
我在应用程序主页中有<flatlist />组件，我试图在它上面放置一个<Image />，但它不是displayed.It，在我的情况下，React Native只显示了最后一个组件。我已经测试了它，将<Image />放在<flatlist />之后，图像显示没有问题，但正如我告诉flatlist消失了，因为那不是主页函数类中的最后一个组件，所以这是我的主页代码 import React from 'react';
import {StyleSheet,View,Text,Image,FlatList} from '
浏览 18提问于2021-04-14得票数 1
回答已采纳
因此，我对React-Native是个新手，所以，Javascript和我正在尝试理解如何检索要在我的FlatList中填充的数据。我收到的JSON格式如下所示
[
{
"18": {
"sellingUnitName": "unité(s)",
"qualifier": "GOOD",
"sizeQualifierName": "gr.20"
},
"19": {
"sellingU
浏览 42提问于2018-03-16得票数 1
回答已采纳
我有一个FlatList，它在使用普通的旧<Text>标记时可以正常工作，但是当使用renderItem内部的自定义组件时，FlatList将不会在更改this.state.dayOfYear时重新呈现。在应用程序加载时，当我设置this.state.dayOfYear时，它会正确加载。但是，当我再次更改状态时，它不会更改FlatList。
FlatList码
<FlatList
style={{flex: 1}}
extraData={this.state}
data={reading_data[this.state.dayOfYear]}
浏览 1提问于2018-01-18得票数 2
回答已采纳
我正在对React-Native的FlatList组件的项设置计数器。如何在每次用户按下"+“或"-”按钮时更新列表项？ 我目前可以更新状态的值，但是列表不显示新的状态。我尝试过在FlatList中添加extraData组件，但它似乎并没有更新。 这是数据结构 data: [
{
id: 1,
name: "Bread",
price: "400",
imageS: "../resources/pan-corteza-blanda
浏览 26提问于2019-06-01得票数 0
回答已采纳
我正在尝试使用react-native和flatlist来构建一个聊天应用程序来显示消息。我希望我的清单总是在底部，任何人都可以给我一个解决方案。
浏览 0提问于2018-10-31得票数 1
我想使用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中呈现API调用中的文本，但是作为输出，我什么也没有得到。没有错误。
以下是我到目前为止尝试过的：
API调用后FlatList中的文本呈现
import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View, Image,
FlatList,Dimensions,
} from 'react-native';
const { width, height } = Dimensions.get('window');
浏览 0提问于2018-12-04得票数 1
回答已采纳
2回答
我需要根据数组索引来增加或减少产品数量。使用此函数时，数据值正在更新，但是平面列表没有呈现更新的值。
import React ,{useState} from 'react';
import { Text, View, StyleSheet,FlatList,Button } from 'react-native';
const addCount = () => {
const [data,setData] = useState([{
id : 1,
name : "Mongo",
price : 30,
qt
浏览 1提问于2021-02-08得票数 0
回答已采纳
大家好，我是这个平台的初学者。有人能帮我找到我在以下代码中犯的错误吗？
我在App.js中使用server作为数据库我已经尝试了以下代码.
import React, { Component } from 'react';
import {
StyleSheet,
View,
ActivityIndicator,
TouchableOpacity,
Text,
Dimensions,
FlatList
} from 'react-native&#
浏览 1提问于2021-05-05得票数 1
1回答
我正在使用世博会开发反应-本机应用程序。我想做一个无限列表，但是每次onEndReached事件被触发时，FlatList是刷新的自动滚动到页面的顶部！
import React, { useState, useEffect } from "react";
import { SafeAreaView, Text, FlatList } from "react-native";
export default function App() {
const [config, setConfig] = useState({
result: [],
浏览 2提问于2020-01-16得票数 0
1回答
你好，我是react-native的初学者。我正在练习一个基本的带有堆栈导航的评论应用程序。我正尝试在主屏幕中使用FlatList，但它不能渲染。这是我的代码。 import React, { useState } from "react";
import { Text, View, FlatList, TouchableOpacity } from "react-native";
import { globalStyles } from "../Styles/Global";
export default function Home({ n
浏览 11提问于2020-11-04得票数 0
回答已采纳
例如，当从react导航导入FlatList时，我的测试失败，如果我从react-native导入它，它可以工作。我的组件如下所示： import React from 'react';
import { Text, View } from 'react-native';
import { FlatList } from 'react-navigation';
const renderItem = ({ item }) => (
<View>
<Text>{item}</Text>
&
浏览 4提问于2020-09-30得票数 0
回答已采纳
因此，这是我第一次使用Reanimated 2，不幸的是，我的应用程序因上面的消息而崩溃。无法查看我的应用程序屏幕。
不变违反:TurboModuleRegistry.getEnforcing(.)：无法找到'NativeReanimated‘。验证此名称的模块是否已在本机二进制文件中注册。
我在这里用的是动画
import React from 'react'
import Item from '../../Common/Item'
import {View,Text,FlatList,StyleSheet , TouchableOpacity
浏览 0提问于2021-01-17得票数 6
react native error import React, { Component } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true
浏览 14提问于2021-09-26得票数 0
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
回答已采纳
我使用FlatList来显示如下图像：
但是，当我在numColumns={2}中添加FlatList时，它将显示错误：
Element type is invalid
奇怪的是，如果我使用numColumns={1}，就没有错误。
我搞不懂。有人能给我一些建议吗？提前谢谢。
这里我使用了我的FlatList代码
import {
View,
Text,
StatusBar,
FlatList,
Image,
Dimensions
} from "react-native";
const { width, height } = Dime
浏览 0提问于2018-04-22得票数 0
回答已采纳
所以我在原生反应中呈现消息，实际上我想创建一个典型的聊天的可视结构(文本输入在底部对齐，消息转到顶部)
但是我不知道如何在React-Native中做到这一点，下面是它在中的样子
下面是我的代码：
<View>
<View style={{justifyContent: 'space-between'}}>
<TextInput
placeholder="Message"
浏览 32提问于2018-06-09得票数 2
回答已采纳
1回答
扁平列表的实现
、、
我使用扁平列表只是为了添加简单的文本。我是react原生的新手。每当我运行这个应用程序时，我都会得到相同的屏幕。我看到的屏幕和app.js中默认的一样。我做了一个组件类BasicFlatList。我的代码是
import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';
import flatListData from '../data/flatListData';
cl
浏览 0提问于2018-10-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
