Как отобразить список и реализовать в нем асинхронность?

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}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Я понимаю, что приемлемый вариант - сначала получить все необходимые данные, а не во время рендеринга. Этот вопрос в основном пытается изучить возможность выполнения асинхронной операции при отображении, если это имеет смысл?

ОБНОВЛЕНИЕ:

Я включил приведенный ниже код, чтобы показать, что он не имеет ничего общего с неправильным типом возврата из 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>

    
  )
}

}