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

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

1 个答案: