【react hook】react hook组件中,在forEach中使用async/awati进行异步操作,为什么后面代码没有等待直接同步运行了呢?

这是因为 forEach 方法不会等待 async/await 异步操作的完成。forEach 方法是一种同步的方法,它会在每个迭代内部同步执行一个回调函数。当遇到 await 时,会立即暂停执行,但是 forEach 方法不会等待回调函数中的 await 异步操作完成,而是立即执行下一个循环。

举个例子,假如在 React Hook 组件中,我们想要通过遍历异步请求一个数组中的数据:

import React, { useState, useEffect } from 'react';function MyComponent() {const [data, setData] = useState([]);useEffect(() => {const fetchData = async () => {const result = [];[1, 2, 3].forEach(async (num) => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${num}`);const data = await response.json();result.push(data);})setData(result);}fetchData();}, []);return (<ul>{data.map(item => <li key={item.id}>{item.title}</li>)}</ul>);
};export default MyComponent;

在这个例子中,使用 forEach 方法来遍历并异步请求数据,然后将请求到的数据添加到 result 数组中。最后,将 result 数组通过 setData 设置为 data 的状态。然而,这个代码并不能达到我们的预期。

原因是 forEach 方法是同步执行的,在执行的过程中会立即调用回调函数。在回调函数中使用 async/await 将请求转为异步操作,当执行到 await 时,虽然会暂停当前的执行,但是 forEach 会继续执行下一次循环,因此 result 数组没有等待所有的异步请求完成后再被更新,而是由于异步请求还没有完成,因此我们只得到了一个空的数组。

解决这个问题的方法是使用 for..of 循环或者 Promise.all。在这里,我提供一个使用 Promise.all 的解决方案:

Promise.all的写法

import React, { useState, useEffect } from 'react';function MyComponent() {const [data, setData] = useState([]);useEffect(() => {const fetchData = async () => {const promises = [1, 2, 3].map(async (num) => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${num}`);return response.json();});const result = await Promise.all(promises);setData(result);}fetchData();}, []);return (<ul>{data.map(item => <li key={item.id}>{item.title}</li>)}</ul>);
};export default MyComponent;

在这个例子中,我们将 forEach 方法替换为 map,用一个数组来保存返回的 Promise。然后,使用 Promise.all 来并行地等待所有的 Promise 被解决,并将它们的值传递给一个数组,然后使用 setData() 方法来更新组件状态。这样就可以达到我们的预期:异步请求完成后更新组件状态。

for…of的写法

使用 for...of 的方法和 forEach 的方法类似,也是使用异步函数进行请求。但是,在 for...of 循环体内部可以使用 await 等待异步操作的完成。例如:

import React, { useState, useEffect } from 'react';function MyComponent() {const [data, setData] = useState([]);useEffect(() => {const fetchData = async () => {const result = [];for (const num of [1, 2, 3]) {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${num}`);const data = await response.json();result.push(data);}setData(result);}fetchData();}, []);return (<ul>{data.map(item => <li key={item.id}>{item.title}</li>)}</ul>);
};export default MyComponent;

在这个例子中,我们使用了 for...of 循环来遍历数组。在循环体内部使用 await 等待异步操作,这样可以保证每个异步操作在上一个异步操作完成后才会被执行。

通过使用 for...of 来遍历数组,可以很好地保证每个异步操作能够按顺序被执行,并且可以等待每个异步操作的完成。这是相对于 forEach 来说的一种更为简洁的方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/137997.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php加密解密

public static function encrypt($data, $key) {$key 111;// 生成盐值$salt openssl_random_pseudo_bytes(16);// 使用盐值和密钥进行加密$encrypted openssl_encrypt($data, AES-128-CBC, $key, 0, $salt);// 将盐值和加密后的数据拼接$result base64_encode($salt . $enc…

新方向!文心一言X具身智能,用LLM大模型驱动智能小车

具身智能已成为近年来研究的热点领域之一。具身智能强调将智能体与实体环境相结合&#xff0c;通过智能体与环境的交互&#xff0c;来感知和理解世界&#xff0c;最终实现在真实环境中的自主决策和运动控制。 如何基于文心大模型&#xff0c;低成本入门“具身智能”&#xff0…

YOLOv8模型ONNX格式INT8量化轻松搞定

ONNX格式模型量化 深度学习模型量化支持深度学习模型部署框架支持的一种轻量化模型与加速模型推理的一种常用手段&#xff0c;ONNXRUNTIME支持模型的简化、量化等脚本操作&#xff0c;简单易学&#xff0c;非常实用。 ONNX 模型量化常见的量化方法有三种&#xff1a;动态量化…

刚安装的MySQL使用Navicat操作数据库遇到的问题

刚安装的MySQL使用Navicat操作数据库遇到的问题 一、编辑连接保存报错二、打开数据表很慢三、MySQL的进程出现大量“sleep”状态的进程四、执行sql脚本报错&#xff0c;部分表导不进去五、当前MySQL配置文件 一、编辑连接保存报错 连接上了数据库&#xff0c;编辑连接保存报错…

Mysql:RC隔离级别下如何提高并发?

RC 一、索引二、唯一索引 最近在Mysql RC隔离级别下遇到个问题:源表并发upsert目标表报错:Deadlock found when try to get lock 一、索引 Mysql是支持行锁的,但是行锁只是针对索引列,若删除条件未加索引会导致走表锁,这样就会造成死锁 二、唯一索引 索引建了之后运行还是报…

Linux下内网穿透实现云原生观测分析工具的远程访问

&#x1f4d1;前言 本文主要是Linux下内网穿透实现云原生观测分析工具的远程访问设置的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &…

Peter算法小课堂—八皇后问题

独立集问题&#xff1a;安排互不冲突的个体 四个斜眼枪手 bool valid(int x,int y){for(int i1;i<min(x,y);i)if(f[x-i][y-i]) return 0;for(int i1;i<min(x,N-1-y);i)if(f[x-i][yi]) return 0;return 1; } void dfs(int x,int y,int c){if(cGUNS){ans;print();return;}i…

淘宝天猫1688以图搜图接口,按图搜索商品,API接口调用展示(拍立淘API)

淘宝拍立淘图片搜索接口技术主要基于图像识别和内容匹配。图像识别是利用计算机视觉技术&#xff0c;对上传的图片进行特征提取和识别&#xff0c;从而找到与该图片相似的商品。内容匹配则是通过文本与图片内容的关联性&#xff0c;对商品标题、描述等信息进行匹配&#xff0c;…

Bard和ChatGPT的一些比较

Bard和ChatGPT的一些比较 2023.11.8版权声明&#xff1a;本文为博主chszs的原创文章&#xff0c;未经博主允许不得转载。 选择正确的自动文本生成工具对企业至关重要。本文将详细分析谷歌 Bard 和 ChatGPT 的优缺点&#xff0c;以帮助企业做出明智的选择。无论企业关注的是客…

django|报错SQLite 3.8.3 or later is required的解决方案

迁移原同事写的程序&#xff0c;到新服务器上边。运行报错。解决方案有三种 降低django版本升级sqlite3&#xff0c;不低于3.8.3版本修改django源码 方案一、降低django版本 卸载高版本django pip uninstall django安装低版本&#xff0c;如 pip install django2.1.7注意&…

asp.net core 获取服务实例的几种方式

在ASP.NET Core中&#xff0c;我们可以使用以下几种方式来获取服务&#xff1a; 构造函数注入&#xff08;Constructor Injection&#xff09;&#xff1a;在需要使用服务的类的构造函数中声明对应的服务类型参数&#xff0c;ASP.NET Core会自动将对应的服务实例注入进来。例如…

贝锐蒲公英智慧运维方案:实现远程网络监控、管理、维护工业设备

为了提升运维效率&#xff0c;能够及时发现和响应设备的故障、异常和潜在问题。 越来越多的企业都在搭建“集中式”的远程智慧运维体系&#xff0c;以提高运维效率和降低成本。 但是&#xff0c;受限于网络&#xff0c;将不同地域的资源和信息进行整合&#xff0c;实现统一管理…

招聘信息采集

首先&#xff0c;我们需要使用PHP的curl库来发送HTTP请求。以下是一个基本的示例&#xff1a; <?php // 初始化curl $ch curl_init();// 设置代理 curl_setopt($ch, CURLOPT_PROXY, "jshk.com.cn");// 设置URL curl_setopt($ch, CURLOPT_URL, "http://www…

linuxC语言缓冲区及小程序的实现

文章目录 1.文件缓冲区1.1介绍1.2缓冲文件系统1.3冲刷函数fflush1.4认识linux下的缓冲区 2.linux小程序的实现2.1 回车\r和换行\n2.2倒计时程序2.3进度条小程序sleep/usleep代码运行结果 1.文件缓冲区 1.1介绍 为缓和 CPU 与 I/O 设备之间速度不匹配&#xff0c;文件缓冲区用以…

2023最新版本 从零基础入门C++与QT(学习笔记) -1- C++输入与输出

&#x1f38f;说在前面 &#x1f388;我预计是使用两个月的时间玩转C与QT &#x1f388;所以这是一篇学习笔记 &#x1f388;根据学习的效率可能提前完成学习,加油&#xff01;&#xff01;&#xff01; 输入(代码如下方代码块) &#x1f384;分析一下构成 &#x1f388;…

HTML页面模拟了一个类似Excel的表格在线diy修改表格内容

html实现在线表格编辑&#xff0c;可以修改每个表格内容&#xff0c;并且可以添加行和列 这个HTML页面模拟了一个类似Excel的表格&#xff0c;可以添加和删除行和列&#xff0c;并且可以编辑每个表格的内容。通过点击按钮可以添加新的行和列&#xff0c;通过按钮可以删除最后一…

力扣第583题 两个字符串的删除操作 c++ 动态规划 附Java代码

题目 583. 两个字符串的删除操作 中等 相关标签 字符串 动态规划 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 示例 1&#xff1a; 输入: word1 "sea", word2 &q…

机器学习模型超参数优化最常用的5个工具包!

优化超参数始终是确保模型性能最佳的关键任务。通常&#xff0c;网格搜索、随机搜索和贝叶斯优化等技术是主要使用的方法。 今天分享几个常用于模型超参数优化的 Python 工具包&#xff0c;如下所示&#xff1a; scikit-learn&#xff1a;使用在指定参数值上进行的网格搜索或…

关灯游戏及扩展

7.8 图形界面应用案例——关灯游戏 题目&#xff1a; [案例]游戏初步——关灯游戏。 关灯游戏是很有意思的益智游戏&#xff0c;玩家通过单击关掉(或打开)一盏灯。如果关(掉&#xff08;或打开)一个电灯&#xff0c;其周围(上下左右)的电灯也会触及开关&#xff0c;成…

JSON可视化管理工具JSON Hero

本文软件由网友 zxc 推荐&#xff1b; 什么是 JSON Hero &#xff1f; JSON Hero 是一个简单实用的 JSON 工具&#xff0c;通过简介美观的 UI 及增强的额外功能&#xff0c;使得阅读和理解 JSON 文档变得更容易、直观。 主要功能 支持多种视图以便查看 JSON&#xff1a;列视图…