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

Question

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;
}

所以一旦我们将相同的方法更改为异步方法，它就会中断并触发异常

Invariant Violation: Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.

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

更新:

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

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

Answer 1

(更新)尝试使用这个:

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>

    
  )
}

}