在 React-Native 中使用 AsyncStorage 更新状态的正确方法是什么?

2023-12-12

我正在尝试向服务器发出 GET 请求以检索 JSON 形式的产品列表。然后我想将数据放入 AsyncStorage 中,以便我可以在视图中显示产品。这样做的正确方法是什么?

我研究过的内容:

on https://facebook.github.io/react-native/docs/asyncstorage.html,在示例中,他们解释了如何从 AsyncStorage 检索值,而不是同时设置它和检索它

我拥有的:

componentDidMount () {
    this.fetchProducts()
    this._loadInitialState().done();
}

_loadInitialState = async () => {
    try {
        var value = await AsyncStorage.getItem('products')
        if (value != null) {
            this.setState({products: value});
        }
    } catch (error) {
        console.log("error setting product list");
    }
}

fetchProducts() {
    fetch("http://localhost:3000/products",{
      method: "GET",
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then((response) => (response.json()))
    .then((data) => setProductList(data)); 

}

setProductList(json_data) {
    Async.setItem('products': json_data);
}

render() {
    console.log(this.state.products) 
    //render view
}

-> this.state.products 为空,我确信服务器通过curl 返回响应。我是反应原生的新手,所以也许我的想法不对。有人可以解释执行此操作的正确方法或建议替代方法吗?

我知道的异步存储是应用程序可以放置其数据的键值存储。该数据可以从异步存储放入对象的状态中,视图将相应更新


您可以在从获取请求获取数据后将其设置为状态,而不是设置和从异步存储获取:

componentDidMount () {
    this.fetchProducts()
}

fetchProducts() {
    fetch("http://localhost:3000/products",{
      method: "GET",
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then((response) => (response.json()))
    .then((data) => setProductList(data)); 

}

setProductList(json_data) {
    this.setState({ products: json_data }, () => {     //Here
      Async.setItem('products': json_data);
    }
}

render() {
    console.log(this.state.products) 
    //render view
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 React-Native 中使用 AsyncStorage 更新状态的正确方法是什么? 的相关文章

随机推荐

  • 假定大小的数组:冒号与星号 - DIMENSION(:) arr 与 arr(*)

    这两种声明假定大小数组的方法有什么区别吗 e g real dimension arr and real arr 表格 real dimension arr 声明一个假设形状数组 而形式 real arr 声明一个假设大小大批 是的 它们的
  • PHP SQL注入预防无需参数绑定[重复]

    这个问题在这里已经有答案了 可能的重复 PHP中如何防止SQL注入 我正在为我的大学图书馆工作一个视频流网站 我正在使用 PHP 和 MySql 我在这个项目中没有使用任何参数化查询 最近我开始了解SQL注入 现在我的代码已经快完成了 过两
  • 混合实数和位向量

    我有两个使用实数的 SMT2 Lib 脚本 它们在道德上是等效的 唯一的区别是 一个也使用位向量 而另一个则不使用 这是同时使用实数和位向量的版本 uses both reals and bit vectors set option pro
  • intellij 错误地指出没有为自动装配存储库找到类型的 beans

    我创建了一个简单的单元测试 但 IntelliJ 错误地将其突出显示为红色 将其标记为错误 没有豆子吗 正如您在下面看到的那样 它通过了测试吗 那么它一定是自动装配的吗 我在创建时遇到了同样的问题春季启动应用程序使用他们的 SpringBo
  • C#:异步NamedPipeServerStream理解

    我试图找到任何好的 清晰的异步 NamedPipeServerStream 示例 但找不到任何适合我的示例 我想要 NamedPipe 服务器异步接受来自客户端的消息 客户端很简单 对我来说很好 但我找不到服务器的示例 或者无法理解它是如何
  • VBscript 检查特定时间范围内文件是否存在(可以使用通配符)

    大家早上好 我一直在尝试将 VBscript 放在一起 当脚本执行时 它会从用户那里获取文件路径和文件名 其中可能有通配符 然后 该脚本将检查指定目录中是否有与提供的文件名相匹配的文件 然后查看上次修改日期以查看它是否是在特定时间范围内 即
  • http.request 中的 nodeJS 最大标头大小

    使用nodeJS v0 10 28 http请求中标头内容的大小 长度是否有限制 让我解释 我需要使用第三方提供商提供的休息服务 返回给我的数据位于请求的标头中 正文大部分为空 120 个左右字符 标头中的数据量从几个字符到几百kb不等 v
  • 使用 UPDLOCK 的 LinQ To SQL

    有没有办法将 UPDLOCK 与 LinQ To SQL 一起使用 我有一个场景需要它 Thanks Linq2SQL 目前不支持发出 UPDLOCK 更多信息here and here 如果您需要这样做 您可以将自己的 SQL 包装在 S
  • 多个文件上传[重复]

    这个问题在这里已经有答案了 如何在任何位置上传多个文件 我的问题是 我正在选择多个文件 但是当我单击上传按钮时 仅上传最后一个文件并重命名名称 并且重命名名称是所有文件名附加逗号 如下所示 file1 file2 flie3 这是代码 Fi
  • Swift 动态库是否向后兼容较旧的 Swift 版本项目

    我开始从头开始开发 SDK 我不太确定应该用 Swift 还是 Objective C 来编写它 我觉得 Swift 在很多方面都比 Objective C 更好 但我的主要问题是 Swift 动态库是否支持旧版本的 Swift 假设我在
  • jQuery Datatables 大数据集未捕获类型错误:无法读取未定义的属性“mData”

    因此 我在使用 php 从数据库迭代的一大组行上收到控制台错误 我正在用 metronic 主题初始化它 正如你所看到的 我有我的头部和身体 我怀疑这个问题可能与输出的大小有关 可能需要使用另一种方法 任何指导表示赞赏 table clas
  • PyQt 从用户处获取日期

    我在 Qt Designer 中使用按钮和 QDateEdit 构建了简单的小部件 用户将日期输入到 QDateEdit 中 然后当他按下按钮时 日期将被保存到变量中 我该怎么做 你可以简单地做到这一点 var name self date
  • 获取 Android Context 的各种方法有什么区别?

    在我见过的各种 Android 代码中 public class MyActivity extends Activity public void method mContext this since Activity extends Con
  • Android ListView 设置要显示的项目数

    如何设置列表中显示的项目数而不滚动 示例 我有一个包含 10 项的列表 我希望只显示 3 个项目 并且我必须滚动才能看到其余的项目 我认为列表视图中显示的项目数量取决于列表可用的大小 我会尝试限制列表大小的布局 如此详细的布局可能不太容易实
  • Play-Framework 2.4:使用 Spring 依赖注入与 Play-Framework 代替 Guice

    我在用Spring Depedency注射代替Play Framework Guice依赖注入 由于你的要求 我们需要使用大部分Spring Modules在我们的应用程序中 例如Spring Data Mongodb但问题是 我们的依赖项
  • Spark Read Json:如何读取整数和结构之间交替的字段

    尝试将多个 json 文件读入数据帧 两个文件都有一个 Value 节点 但该节点的类型在整数和结构之间交替 File 1 Value 123 File 2 Value Value On ValueType State IsSystemVa
  • WKWebView中是否可以关闭位置权限?

    我想知道是否可以阻止WKWebView显示位置权限提示 website com 想要使用您当前的位置 我相信它正在显示 因为该网站包含谷歌地图 我对在其位置预加载位置不感兴趣 就像其他问题中所示 我只是不想在 WKWebView 中使用位置
  • 如何在shell脚本中添加进度条?

    在 bash 或 NIX 中的任何其他 shell 中编写脚本时 如果运行的命令需要花费几秒钟的时间 则需要进度条 例如 复制大文件 打开大 tar 文件 您建议使用哪些方法向 shell 脚本添加进度条 您可以通过覆盖一行来实现这一点 使
  • 更好地突出显示当前编辑组

    VSCode 是否提供了突出显示当前内容的方法编辑组 或选项卡 in focus 例如 突出显示一个边界框在焦点组周围用单独的颜色 如下图所示 突出显示当前选项卡在焦点组中 要修改活动选项卡 请参阅https code visualstud
  • 在 React-Native 中使用 AsyncStorage 更新状态的正确方法是什么?

    我正在尝试向服务器发出 GET 请求以检索 JSON 形式的产品列表 然后我想将数据放入 AsyncStorage 中 以便我可以在视图中显示产品 这样做的正确方法是什么 我研究过的内容 on https facebook github i