草庐IT

javascript - 将数据加载到 React Native FlatList

coder 2025-01-05 原文

我完全承认我现在对 Reactive Native 还很陌生,所以我预计这是一个简单的答案和一个潜在的愚蠢问题 :) 事实上,这本身可能不是 RN 问题,因为我会解释如下。

我有以下代码:

class MyScreen extends React.Component {

  constructor(inProps) {
    super(inProps);
    this.state = { listData : [ ] };
  }

  render() { return (
    <View>
      <FlatList data={ this.state.listData }
        renderItem={ ({item}) =>
          <Text>{item.firstName} {item.lastName}</Text>
        }
      />
    </View>
  );  }

  async componentDidMount() {
    const data = [ ];
    let keys = await AsyncStorage.getAllKeys();
    keys.forEach(async function(inKey) {
      let obj = await AsyncStorage.getItem(inKey);
      obj = JSON.parse(obj);
      data.push(obj);
    });
    this.setState({ listData : data });
  };

}

目标只是从 AsyncStorage 加载数据并将其转储到列表中。看起来很基本,对吧?不幸的是,我无法让它工作:列表是空的。

现在,让我们来谈谈愚蠢的事情:是的,确实存储了数据,是的,它的格式是正确的(我知道这一点是因为如果我简单地获取一个特定的项目并将其 push() 到数据中,那么它就会出现在按预期列出)。

事实上,我知道问题出在哪里:setState() 调用在 keys.forEach() 调用完成之前执行。我知道这一点,因为如果我用这个替换 setState() 调用:

setTimeout(function() {
  this.setState({ listData : data });
}.bind(this), 1000);

...然后我的列表突然按预期填充(我也可以在其中放置一些 console.log() 并看到 keys.forEach() 调用之后的那个实际上在键内的那些之前执行。对于每个())。我也知道,显然 getItem() 调用在调用 JSON.parse() 之前正在等待,否则这根本无法工作。

换句话说:我知道这是由这段代码的异步性质造成的。我似乎无法弄清楚的是如何正确编写它以避免这种情况。

我正在查看它,我在想“好吧,keys.forEach() 是一个阻塞调用,所以它怎么可能在 setState() 调用之前无法完成,特别是考虑到键的异步用法。 forEach() 回调和内部 getItem() 调用上的 await 用法?”...我唯一的想法是在 keys.forEach() 调用前放置一个异步,但这没有任何区别。

所以,这似乎本质上是一个基本的 JavaScript 问题,但我似乎无法解决它......但另一方面,我不确定我是否正在尝试以某种方式做到这一点我根本不应该在 RN 土地上,也许这才是真正的问题。

请注意,由于流经应用程序(添加是在另一个屏幕上完成的),数据必须从 AsyncStorage 动态提取,所以在我看来,尝试在 componentDidMount() 中加载它是有意义的,我是只是挂断了所涉及调用的异步性质。

有什么建议吗?

谢谢!

编辑:我还应该提到,我知道我可以解决这个问题的一种方法是完全删除异步性质:而不是存储单个数据项,而是将所有内容存储在 AsyncStorage 中的单个对象中。然后我可以读取一个项目,它将是一个数组(或将包含一个数组),然后唯一的异步部分是 getItem() 调用,但我可以使用它的回调版本并使其以这种方式工作.. .而且我根本不反对这种方法,但在这一点上,我真的很想了解我做错了什么,除了学习一些东西之外没有其他原因,因为这似乎应该有效:)

最佳答案

keys.forEach 在它自己的范围内(在它自己的回调函数中)执行代码,这会破坏你的 async/await 对。

改为这样做:

for (let inKey of keys) {
    let obj = await AsyncStorage.getItem(inKey);
    obj = JSON.parse(obj);
    data.push(obj);   
}

如果你真的想要forEach,你必须自己写一个返回Promise的版本,所以你可以在上面 Hook await :

await keys.awaitableForEach(async function(inKey) {

关于javascript - 将数据加载到 React Native FlatList,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47860353/

有关javascript - 将数据加载到 React Native FlatList的更多相关文章

  1. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  2. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  3. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  4. ruby - Ruby 有 `Pair` 数据类型吗? - 2

    有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳

  5. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项? - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常,直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  6. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  7. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  8. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流,在人体运动的基础上,添加双手手指部分的运动。双手手背的角度仍由Optitrack提供,数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照:https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming,开始向Unity3D广播数据;MotionVenus中设置->选项选择Unit

  9. 使用canal同步MySQL数据到ES - 2

    文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目,Java开发。基于数据库增量日志解析,提供增量数据订阅&消费。Git地址:https://github.co

  10. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中,我们希望成为我们的rails应用程序中的一等公民的几个类类型起源,这意味着它们应该驻留在应用程序的app文件夹下,它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来,我有点担心应用程序文件夹被这么多目录污染。因此,我想将它们移动到一个子目录/模块中,该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内,目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

随机推荐