如何解决反应原生 foreach 循环无法正常工作
我正在开发 React Native 应用程序。在屏幕上,我从内存中获取一些图像,然后读取它们的统计信息(大小、名称、类型)。我有一个数组来存储图像对象。但我的行为很奇怪。这是我的示例代码。
inferred
我在这里解释我得到了什么。在 train_ds = tf.keras.preprocessing.image_dataset_from_directory(
data_dir,labels="inferred",label_mode="int",validation_split=0.2,subset="training",seed=123,image_size=(img_height,img_width),batch_size=batch_size)
val_ds = tf.keras.preprocessing.image_dataset_from_directory(
data_dir,subset="validation",batch_size=batch_size)
中,我从内存中获取图像。我在这个数组中迭代,对于每个孩子,我读取他们的状态。至此,一切正常。我已经创建了带有名称项的临时数组。在带有相关数据的存储图像数组中使用 push 方法。这里问题是 const getPhotos = () =>{
RNFetchBlob.fs.ls(dirs_read)
.then((data) =>{
let i = 0
let items = []
let arrOfImages = data.filter((elem) => elem.endsWith('jpeg'))
arrOfImages.forEach((child) =>{
console.log('iteration',++i)
RNFetchBlob.fs.stat(`file://${dirs_read}${child}`).then((stats) =>{
var dateTime = new Date(stats.lastModified);
var path =stats.path;
items.push({
name: child,date: ('0' + dateTime.getUTCDate()).slice(-2) + '-' + ('0' + dateTime.getUTCMonth()).slice(-2) + '-' + dateTime.getUTCFullYear(),size: formatBytes(stats.size),type:'jpeg',path: path
})
console.log(items,'Items in Loop')
}).catch((err) => {
console.log('Some Eror in stats read')
})
console.log(items,' Items out of Loop')
})
}).catch((error) =>{
})
}
首先执行,然后执行arrofImages
。当我从 arrOfImages
中控制 items.push
数组时,它是空的。在这里,我在控制台上有一个输出。
我希望当我获得所有数据时,然后我想证明这一点。
如果我在 items
之后立即调用 arrOfImages
函数,那么我正在获取数据但它加载缓慢。一一的意思。我要顺利。
解决方法
您可以将函数转换为异步函数。使用该关键字 await 您告诉异步函数在该行上等待,直到 RNFetchBlob 准备就绪。准备就绪后,您可以使用该结果。
const getPhotos = async () => {
const data = await RNFetchBlob.fs.ls(dirs_read);
// The following code will now be executed when RNFetchBlob is ready and data is accessible.
let i = 0;
let items = [];
let arrOfImages = data.filter((elem) => elem.endsWith("jpeg"));
// and so on ...
};
,
我们需要改变两件事。
- 使用 async-await 代替 Promises;
- 使用 For of 循环代替 forEach 循环
请检查以下代码。我认为这将解决您的问题。
const getPhotos = async () => {
try {
let data = await RNFetchBlob.fs.ls(dirs_read);
let i = 0
let items = []
let arrOfImages = data.filter((elem) => elem.endsWith('jpeg'))
for (const child of arrOfImages) {
console.log('iteration',++i)
try {
let stats = await RNFetchBlob.fs.stat(`file://${dirs_read}${child}`);
var dateTime = new Date(stats.lastModified);
var path = stats.path;
items.push({
name: child,date: ('0' + dateTime.getUTCDate()).slice(-2) + '-' + ('0' + dateTime.getUTCMonth()).slice(-2) + '-' + dateTime.getUTCFullYear(),size: formatBytes(stats.size),type: 'jpeg',path: path
})
console.log(items,'Items in Loop')
} catch ((err) => {
console.log('Some Eror in stats read')
})
}
console.log(items,' Items out of Loop')
} catch ((error) => {
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。