如何映射列表并在其中实现异步？

Isaac 发表于 Dev

以撒

renderDuration(x) {
  return 'abc'
}

render() {
  return (
    <View>
      {this.props.list.map(x => (
        <Text>{this.renderDuration(x)}</Text>
      ))}
    </View>
  )
}

上面的代码运行正常。这种情况是非常基本的，即循环列表，并为每个元素调用方法renderDuration并获取单个字符串值。现在看下面。

async renderDuration(x) {
  let someAsyncOpt = await getTextFromSomewhere();
  return someAsyncOpt;
}

因此，一旦将相同的方法更改为异步方法，它就会中断并引发异常

永久违反：永久违反：对象作为React子对象无效（找到：键为{_40，_65，_55，_72}的对象）。如果要渲染子级集合，请改用数组。

我知道可行的选择是先获取所需的任何数据，而不是在渲染时获取任何数据。这个问题基本上是试图探索在映射时执行异步操作的可能性（如果有意义）吗？

更新：

我已包含以下代码，以表明它与从异步opt返回的错误类型无关。基本上是我们包含关键字的那一刻async，它将中断

async renderDuration(x) {
  return 'abc';
}

宠物小精灵

（更新）尝试使用此功能：

class Alpha{

// ...

// Update :
async renderDuration(x) {
   let someAsyncOpt = await Promise.all(getTextFromSomewhere());
   return someAsyncOpt;
}

render() {
  return (
    
     // Old :
      <View>
        {this.props.list.map(x => (
          <Text>{this.renderDuration(x)}</Text>
        ))}
      </View>
    
     // Update :
     <View>
      {
        this.props.list.map( 
            async (x) => { await this.renderDuration(x) } 
        );
      }
     </View>

    
  )
}

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。