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

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

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

不变冲突：不变冲突：对象作为React子对象无效(已找到：键为｛_40，_65，_55，_72｝的对象)。如果要渲染子对象的集合，请改用数组。

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

更新：

我已经包含了以下代码，以表明它和异步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>

)
}
}