问题描述
我正在开发 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) => {
});
}