首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我在react Native中有一个平面列表,但我按下了保存按钮,没有自动重新加载数据

在React Native中,当你按下保存按钮后,数据不会自动重新加载是因为React Native的渲染机制是基于状态变化的。当你按下保存按钮后,需要手动更新数据并重新渲染列表。

以下是一种可能的解决方案:

  1. 在保存按钮的点击事件处理函数中,更新数据源。你可以使用React的状态管理机制(如useState)来保存数据。
  2. 在数据更新后,调用React Native的重新渲染机制,使列表重新渲染。你可以使用React的强制更新机制(如forceUpdate)或者使用useState的更新函数来触发重新渲染。

下面是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';
import { View, Button, FlatList } from 'react-native';

const MyComponent = () => {
  const [data, setData] = useState([]);

  const handleSave = () => {
    // 更新数据源
    const newData = [...data, { id: data.length + 1, name: 'New Item' }];
    setData(newData);
  };

  return (
    <View>
      <Button title="Save" onPress={handleSave} />
      <FlatList
        data={data}
        renderItem={({ item }) => <Text>{item.name}</Text>}
        keyExtractor={(item) => item.id.toString()}
      />
    </View>
  );
};

export default MyComponent;

在上述示例中,按下保存按钮后,handleSave函数会将新的数据项添加到data数组中,并通过setData函数更新数据源。由于数据源发生了变化,FlatList会重新渲染并显示新的数据项。

需要注意的是,这只是一种解决方案,具体的实现方式可能会根据你的项目结构和需求而有所不同。另外,如果你使用了其他的状态管理库(如Redux),你也可以根据该库的使用方式来更新数据和触发重新渲染。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React Native基础&入门教程:调试React Native应用的一小步

开始之前,你需要搭建好本地开发环境,并有一部Android 5.0版本以上的手机可供连接至电脑。 首先,使用官方工具react-native-cli创建好一个初始化的工程,并安装好依赖。...让我们只是Enable Live Reload,然后从react-native引入Button,View里加上一个按钮。 ? 图6. 添加按钮 这个时候,保存代码。手机界面确实立即就变化了!...比如,下面三次输入,前两次输入是之前还没有开启这个命令行窗口时下的。 ? 也许你会想:不是想在命令窗口看到输出,而是想能够浏览器里那样看到输出,甚至断点调试。这就是查看log的第二种方法。...这个时候,下手机上的Test按钮,可以看到程序执行到断点停下了,这与调试网页代码是多么相似: ? 图13. 浏览器上的断点调试 不过,与调试纯网页代码有两点不同。...只是现在程序断了第一次按钮的时候。 我们让程序继续(如果在断点期间多次按钮,会有多次被断住)。 ? 图14. 浏览器控制台输出 我们下了6次,调试工具下也显示出6次输出。

1.2K00

React Native调试心得

Reloading JavaScript 只是修改了js代码的情况下,如果要预览修改结果,你不需要重新编译你的应用。在这种情况下,你只需要告诉React Native重新加载js即可。...Developer Menu中有Reload选项,单击Reload让React Native重新加载js。...React Native旨在为开发者带来一个更好的开发体验。如果你觉得上文的加载js代码方式太low了或者不够方便,那么有没有一种更简便加载js代码的方式呢? 答案是肯定的。 ...当你的js代码发生变化后,React Native自动生成bundle然后传输到模拟器或手机上,是不是觉得很方便。 Hot Reloading ?...执行控工具 从上图可以看到“执行控工具”按钮侧板顶部,让你可以步执行代码,当你进行调试的时候这几个按钮非常有用: 继续(Continue): 继续执行代码直到遇到下一个断点。

5.1K70
  • React Native调试技巧与心得

    Reloading JavaScript 只是修改了js代码的情况下,如果要预览修改结果,你不需要重新编译你的应用。在这种情况下,你只需要告诉React Native重新加载js即可。...Developer Menu中有Reload选项,单击Reload让React Native重新加载js。...React Native旨在为开发者带来一个更好的开发体验。如果你觉得上文的加载js代码方式太low了或者不够方便,那么有没有一种更简便加载js代码的方式呢? 答案是肯定的。...当你的js代码发生变化后,React Native自动生成bundle然后传输到模拟器或手机上,是不是觉得很方便。 Hot Reloading ?...执行控工具 从上图可以看到“执行控工具”按钮侧板顶部,让你可以步执行代码,当你进行调试的时候这几个按钮非常有用: 继续(Continue): 继续执行代码直到遇到下一个断点。

    6.8K50

    使用 React 与 Vue 创建同一款 App,差别究竟有多大?

    于是意识到必须自己动手来比较 Vue 与 React 之间的异同。自力更生的过程中,用这篇文章记录下了具体过程。 目标 将会构建一个标准的待办事项应用程序,允许用户添加和删除列表中的项目。...这是因为 React 的 create-react-app 组件需要一个附带文件来保存其样式,而 Vue CLI 采用全包方法,其样式实际组件文件中声明。...整个列表是通过使用扩展运算符添加的。 最后,我们将 todo 设置为空字符串,它会自动更新输入字段中的 value。...Vue 中,我们的输入字段中有一个名为 v-model 的句柄。...下回车按钮时,React 就需要花费更长的时间来创建事件监听器,从而创建新的 ToDo 项目。

    5.3K10

    那些React-Native踩过的的坑

    从学React-Native开发功能模块大概5天,有些体会:1如果说产品原型去做一样东西,那是容易的,但是这会造成很多问题,第一个是机器人一样写代码,你不会从项目整体思考,代码的质量也比较差而且不容易维护.../38831876#38831876 0x02 布局页面中的某个部分频繁刷新    这边做一个ListView中的一些item的需要倒计时显示,一开始把他放在整个item的render布局中然后发现加载...0x03 关于state的实用用法   react-native中state代表动态改变值的状态,但如何应用到开发中是一个关键点?  ...具体例子:    0x01网络请求的不同状态:请求成功-无内容 请求成功-有数据 解析失败 接口错误     0x02播放器的详情页中点击播放按钮 进度条开始往前走 可以设置一个播放状态          ...然后若点击播放           1按钮改变按钮图标           2播放进度条开始往前走 0x03 关于react-native中ListView加载数据细节     页面中经常会有上拉加载数据的情况

    1.9K90

    翻译 | Thingking in Redux(如果你只了解MVC)

    经过一番讨论,我们最终做出的决定是:React-Native。学习一门新的“语言”或者框架并不是个大问题,但是老兄得告诉你,React-Native和Redux确确实实是块难啃的骨头。...这篇文章没有介绍React-Native是如何工作的(因为那确实不是最难的部分)。...如你所见(以及从经验中了解到的)在上面的图表中,数据能够双向流动。你view层下了一个button,它会向你的controller发送一个信息,导致model的更新。...Redux数据流。人生变得糟透了。 Redux中事情有些不同。假如你有一个组件,然后你想在按钮下的时候做些事情。那么你该从何开始呢?...在这个例子中,将会展示如何编辑一个text input,然后当有用户下按键时它将会调用action来保存内容。

    1.4K100

    React Native程序调试

    重载 JavaScript 只是修改了js代码的情况下,如果要预览修改结果,你不需要重新编译你的应用。在这种情况下,你只需要告诉React Native重新加载js即可。...Developer Menu中有Reload选项,单击Reload让React Native重新加载js。...Automatic reloading Developer Menu中你会看到”Enable Live Reload” 选项,该选项提供了React Native动态加载的功能。...当你的js代码发生变化后,React Native自动生成bundle然后传输到模拟器或手机上,是不是觉得很方便。 ?...执行控工具 从上图可以看到“执行控工具”按钮侧板顶部,让你可以步执行代码,当你进行调试的时候这几个按钮非常有用: 继续(Continue): 继续执行代码直到遇到下一个断点。

    3.7K60

    React Native开发之调试

    重载 JavaScript 只是修改了js代码的情况下,如果要预览修改结果,你不需要重新编译你的应用。在这种情况下,你只需要告诉React Native重新加载js即可。...Developer Menu中有Reload选项,单击Reload让React Native重新加载js。...Automatic reloading Developer Menu中你会看到”Enable Live Reload” 选项,该选项提供了React Native动态加载的功能。...当你的js代码发生变化后,React Native自动生成bundle然后传输到模拟器或手机上,是不是觉得很方便。 ?...执行控工具 从上图可以看到“执行控工具”按钮侧板顶部,让你可以步执行代码,当你进行调试的时候这几个按钮非常有用: 继续(Continue): 继续执行代码直到遇到下一个断点。

    3.9K80

    react-native布局与组件

    - 样式 移动端开发中,是没有像素概念的。...{marginTop: 20}} /> 官方最新版本需要安装react-native-webview 需要明确的认知是:webview是有可能存在跨域问题的...ListView底层实现,渲染组件Item是全量渲染,而且没有复用机制,当渲染较⼤数据量时,会不可避免地卡顿。...第⼀次打开与切换Tab时会出现卡顿或白屏的情况,比如ListView中有100个Item,只能等这 100条Item都渲染完成,ListView中的内容才会展示滑动列表时会出现卡顿。...(2)不支持分组列列表 扯了那么多理论,如果列表写不了想说自己懂rn是很扯的。是时候开始写一个了。 需求:列表的下拉刷新和上划动加载 ? 看今日头条等新闻列表类app时,都需要用到。

    5.2K20

    2020年及未来的软件编程趋势预测

    也有可能错了 –– 所以请不要盲目的相信我 — 但这就是认为会发生的事情。无法预测未来,但我可以做出有根据的猜测。 “预测未来的最好方法就是创造它。”...典型的 REST API 需要从多个 URL 加载,但 GraphQL API 可以单个请求中获取您的应用程序所需的所有数据。...请想象一下 React 应用程序中使用 Rust 图像处理库 –– Wasm 将上述设想变为现实。 众所周知性能的重要性,随着数据量的增长,保持良好性能将更加困难。...争论什么框架是“最好的”是完全没有意义的。选择一个框架并将你所有的精力用于完成工作才是正途。 如果您有灵感,请从此列表中选择一些内容并立即开始构建!...如果你对学习 JavaScript 很感兴趣,那么推荐“你不懂 JS”系列丛书。 之前写过关于 JavaScript 流行的文章 - 你也应该读一读。 是否落下了很酷的项目?

    94430

    【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

    提供一个可选按钮列表。点击任何按钮触发各自的下回调动作,并且忽略警告。默认情况下,只有一个 钮是“OK”按钮列表中最后一个按钮被视为“主”按钮,它被用粗体显示出来了。...当动态加载一些可能非常大(或概念上无限大的)数据集时,为了让列表视图滚送的顺畅,有一些性能操作设计:     • 只有重新呈现改变行——提供给数据源的hasRowChanged函数告诉列表视图是否需要重新呈现一行...如果重新呈现它们耗费很大,那就把它们包在StaticContainer或其他适当的机制中。一个呈现过程中,页脚始终是列表的底部,页眉始终列表的顶 部。...NOTE:生成应用程序所需的新资源         无论什么时候您把新的资源添加到您的画板中您都需要在使用它之前通过运行react-nativerun-android重新构建您的应用程序-仅重新加载JS...这是导致网页的帧数下降的其中一个重要的原因,因为解析工作会被执行在主线 程中。React Native中,图片的解析会在不同的线程中执行。

    55740

    开发一个在线 Web 代码编辑器,如何?今天来教你!

    本篇文章希望和大家一起,尝试创建一个在线的 Web 代码编辑器,并在 HTML、CSS 和 JavaScript 的帮助下实时显示结果。本文的最后也放置了源代码的下载链接。...我们的例子中,我们没有加载外部页面;相反,我们想创建一个新的内部 HTML 文档来存放我们的结果。为此,我们需要 srcDoc 属性。该属性采用我们想要嵌入的 HTML 文档。...如果我们没有它的情况下编写它,那么每次在编辑器中一个键,我们的 iframe 都会更新,这通常不利于性能。...也就是说,每次用户一个键时,它都会重新开始计数,因此 iframe 只会在用户空闲(未键入)250 毫秒时更新。这是避免每次下键时都必须更新 iframe 的一种很酷的方法。...让我们来看一个输入开始标签时自动添加结束标签的示例,以及输入开始括号时自动结束括号的另一个示例: 首先要做的是将插件导入到我们的 Editor.jsx 文件中: import 'codemirror

    12.1K30

    【实战】快来和我一起开发一个在线 Web 代码编辑器

    本篇文章希望和大家一起,尝试创建一个在线的 Web 代码编辑器,并在 HTML、CSS 和 JavaScript 的帮助下实时显示结果。本文的最后也放置了源代码的下载链接。...我们的例子中,我们没有加载外部页面; 相反,我们想创建一个新的内部 HTML 文档来存放我们的结果。为此,我们需要 srcDoc 属性。 该属性采用我们想要嵌入的 HTML 文档。...如果我们没有它的情况下编写它,那么每次在编辑器中一个键,我们的 iframe 都会更新,这通常不利于性能。...也就是说,每次用户一个键时,它都会重新开始计数,因此 iframe 只会在用户空闲(未键入)250 毫秒时更新。 这是避免每次下键时都必须更新 iframe 的一种很酷的方法。...让我们来看一个输入开始标签时自动添加结束标签的示例,以及输入开始括号时自动结束括号的另一个示例: 首先要做的是将插件导入到我们的 Editor.jsx 文件中: import 'codemirror

    76020

    React Native列表之FlatList开发实用教程

    APP开发过程中,列表可谓是页面最重要的一种展现形式了,几乎每一个APP都离不了列表,那么在这篇文章中将向大家分享React Native中该如何实现列表,以及FlatList的原理和实用指南。...React Native的早期版本中列表通常使用ListView来实现,新版React Native推荐我们使用FlatList来实现列表,那么为什么推荐使用FlatList列表呢?...接下来就让从FlatList的由来说起: 大家React Native开发环境过程中遇到无法解决的问题可以课程问答区进行提问,课程老师会对你进行辅导和帮助; FlatList的由来?...滑动列表时会出现卡顿与不跟手:当因ListView中展示了大量数据的时候,滑动列表你会发现没有少量数据的时候的跟手与流畅,这是因为ListView为了渲染大量数据需要大量的内存和计算,这对手机资源是一个很大的消耗...boolean 等待加载数据时将此属性设为true,列表就会显示出一个正在加载的符号。 horizontal?: ?boolean 设置为true则变为水平布局模式。

    6.5K00

    不用React Vue,只用原生JS,如何开发单页面应用?

    这就导致一个问题:如果我们不用React或Vue(例如我的游戏《Dice Crush》是用原生JS实现),没有React Router和Vue Router的能力,该怎么开发单页面应用呢?...每个页面需要对应一个路由。说一下游戏《Dice Crush》中的做法。它有3个页面:主页、选择关卡页面、游戏页面。...如果用户是鼠标中键下a标签、或者用户同时下了Ctrl(Windos)、Command(Mac)、Shift,那么他应该期望是新窗口打开,我们使用href原生行为即可。...如果用户同时下了Option,那么他应该期望是打开菜单栏,我们也执行原生行为。...4、手动加载新页面、卸载旧页面由于我们页面渲染是通过document.body.innerHtml实现的,所以会在加载新页面时自动卸载旧页面。

    9.6K51

    Flutter vs React Native vs Native:深度性能比较

    我们将 GameBench 作为测试工具,并确保我们保持客观性(这并没有改变我们很多方面都非常喜欢Flutter的事实:),并且仍在运行许多React NativeNative项目)。...GameBench有很多改进空间,但我们的目标是设法将每个应用程序置于一个测试环境中。 源代码是开放的,因此请尝试并与我们分享您的想法。...我们还使用Android上的RecyclerView.SmoothScroller来自动化滚动速度。iOS和React Native上,我们使用了带有计时器的方法,并以编程方式滚动到位置。...Flutter上,我们使用ScrollController平滑滚动列表每种情况下,我们列表视图中都有1000个项目,并且滚动时间相同以到达最后一个列表元素。...在这种情况下使用的第三方库: iOS: 加载和缓存图像 — Nuke Android: 加载和缓存图像 — Glide React Native加载和缓存图像— React-native-fast-image

    3.5K20

    React Native 图表组件Echarts

    一种 React Native 中封装的响应式 Echarts 组件,使用与示例请参见:react-native-echarts-demo 近年来,随着移动端对数据可视化的要求越来越高,类似...Echarts 官方推荐过一个第三方封装库:react-native-echarts(注:它对应的 nmp package 名字为 native-echarts ),目前有 400+ stars 和 100...为方便开发中使用,该组件具有以下特点: 按照响应式进行设计,只需 option 中配置好数据源,数据变化后图表就会自动刷新,更符合 React 的风格。...、数据增量加载等可在 WebChart/index.js 中直接进行修改。...React Native 的 WebView 好像 style.height 属性无效,因此不得不在外面套了个 View。 现在的资源加载方式,index.html Android 上会有两份。

    2.6K20

    关于React18更新的几个新功能,你需要了解下

    例如,如果你一个点击事件中有两个状态更新,React 总是将它们分批处理到一个重新渲染中。...f ) ; // 还没有重新渲染 // React 只会在最后重新渲染一次(这是批处理!)...例如,React 确保对于每个用户启动的事件(如单击或按键),DOM 在下一个事件之前完全更新。例如,这可确保提交时禁用的表单不能被提交两次。 如果不想批处理怎么办?...有时,诸如单击按钮或输入输入之类的小动作可能会导致屏幕上发生很多事情。这可能会导致页面在所有工作完成时冻结或挂起。 例如,考虑在过滤数据列表的输入字段中键入。...总结 React 18 没有任何重大更改,因此,我们将当前的存储库升级到最新版本几乎不需要更改代码,但我们可以享受它们很酷的功能。 最后,感谢你的阅读。 - END -

    5.9K50
    领券