Question

我试图返回一个字符串值以在HTML中显示它。在我的HTML中，我在视图中使用了Text元素（类似于React Native中的div），并尝试用从方法_getCategories中获取的内容来填充它。问题是我无法使该方法返回String值，因为该值是在Promise内部返回的。

现在，我正在尝试使此方法返回一个简单的String值：

    _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>

编辑：

我通过对所有类别只发出一个请求来简化了我的代码，因此它现在应该返回一个Text对象。不幸的是，该文本仍未显示在我的应用中。

Answer 1

首先从方法返回承诺链：

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

，但是它仍然返回一个promise，可以解决文本问题，并且无法更改它。相反，该文本应成为组件状态的一部分，以便xou可以在承诺解决时更新文本：

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

在render()内只需执行以下操作：

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

在Promise中返回值

1 个答案: