Возврат значения в Обещании

Question

Я пытаюсь вернуть значение String, чтобы отобразить его в моем HTML.В моем HTML я использую элемент Text в View (похожий на div в React Native) и пытаюсь заполнить его тем, что получаю из метода _getCategories.Проблема в том, что я не могу заставить метод возвращать строковое значение, поскольку значение возвращается внутри Promise.

Теперь я пытаюсь заставить этот метод возвращать простое строковое значение:

    _getCategories = item => {
    const categoryNames = [];
    let fetches = [];
    var allCategories = '';
    for (var i = 0; i < item.categories.length; i++) {
      allCategories = allCategories + item.categories[i] + ',';
    }
    allCategories = allCategories.substring(0, allCategories.length - 1);
    fetches.push(
      fetch(
        'http://54.168.73.151/wp-json/wp/v2/categories?include=' + allCategories
      ).then(response =>
        response.json().then(responseJson => {
          var names = '';
          for (let category of responseJson) {
            names = names + category.name + ', ';
          }
          this.names = String(names.substring(0, names.length - 2));
          console.log(this.names);
          return <Text style={styles.categories}>{this.names}</Text>;
        })
      )
    );
  };

Я думал, что это уже возвращает правильное значение, но оно не отображается в моем представлении.Вышеупомянутый метод я вызываю следующим образом:

<View>
      {this._getCategories(item)} //this will be a text element after return
</View>

Редактировать:

Я упростил свой код, сделав только один запрос для всех категорий вместе, поэтому, вероятно, он долженвернуть текстовый объект сейчас.К сожалению, текст все еще не отображается в моем приложении.

Answer 1

Прежде всего, верните цепочку обещаний из метода:

 return Promise.all(fetches).then(res => {

, но затем она все равно возвращает обещание, разрешающееся когда-нибудь в тексте, и нет способа изменить это.Вместо этого этот текст должен быть частью состояния компонентов, чтобы вы могли обновлять текст после разрешения обещания:

  onComponentDidMount() {
    this._getCategories().then(categories => this.setState({ categories }));
 }

А внутри render() просто выполните:

 <div>
  {this.state.categories || <Text>Loading categories</Text>}
 </div>