React Native - 如何异步过滤数组（async/await）

Question

我有一个筛选方法：

_filterItems(items) {
  return items.filter(async item => {
    let isTrue = await AsyncStorage.getItem('key');
    return isTrue;
  })
}

调用方法this._filterItems(myItemsAsArray)总是返回undefined。

我该如何使其按预期工作？

- Gold Chicken

---

这可能是 使用返回 Promise 的函数过滤数组 的重复问题。 - Garrett Motzner

有人能给我一个简单的解决方案吗？我已经在谷歌上尝试了很多方法，但是无法解决这个问题 :( - Gold Chicken

Answer 1

我猜您指的是 AsyncStorage.getItem(item); 而非 AsyncStorage.getItem('key');。

async function run(){
    let result =  await Promise.all(items.map((item)=>AsyncStorage.getItem(item)));
  result = result.filter(Boolean); // filter all non-truthy values
  console.log('result',result);

}

run();

这里是代码https://jsfiddle.net/2juypmwL/1/

技术上说，你甚至可以把它缩短：

async function run(){
    let result =  (await Promise.all(items.map(AsyncStorage.getItem))).filter(Boolean);
  console.log('result',result);
}

run();

- Milad

Answer 2

您不能直接使用异步函数与数组.filter方法一起使用，因为该方法期望返回一个布尔值，但异步函数始终会返回一个Promise。相反，您可以为它提供一个简单的包装器，以便允许Promise先解析，然后使用这些Promise的结果作为筛选条件。

示例：

const items = Array(10).fill().map((_, i) => i);

function asyncFilter(arr, func) {
  return Promise.all(arr.map(func)).then(boolArr => arr.filter((_, i) => boolArr[i]));
}

asyncFilter(items, async n => Boolean(n % 2)).then(result => console.log(result))

- CRice