React Starter Kit中的Ajax調用

Question

我正在使用React Starter Kit來創建我的第一個React應用程序，並且我在Ajax調用中苦苦掙扎。 我看到該工具包嵌入了一種執行Ajax調用的方式（通過內部用於應用程序路由的方式）：

import fetch from '../../core/fetch';

我已經在組件中添加了它，然后在組件加載時嘗試執行Ajax調用。 這是我的代碼：

  componentDidMount() {

      var moduleManager = 'https://my_domain.com/my_endpoint';

      async function getModules (url) {
          const response = await fetch(url);
          const content = await response.json();
          return content;
      };

      this.state.modulesList = getModules(moduleManager);

      console.log(this.state.modulesList);
  }

我還在渲染函數中使用狀態值：

  render() {
    var rows = [];
    for (var i = 0; i < this.state.modulesList.length; i++) {
        rows.push(
            <li>{this.state.modulesList[i]}<li/>
        );
    }

這段代碼一起記錄在我的控制台中：

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

然后（成功）執行了Ajax調用，我的控制台現在顯示以下內容：

Promise
__proto__:Promise
[[PromiseStatus]]:"resolved"
[[PromiseValue]]:Array[16]

所需的行為當然是更新我的視圖：執行ajax調用時，每個數組成員顯示一行。

我想念什么？

謝謝

Answer 1

我建議做什么：

constructor() {
  ...
  // Bind your async function to your stateful component's class
  this.getModules = this.getModules.bind(this);
}

async getModules(url) {
  try {
    // Perform the ajax call
    const response = await fetch(url);

    // Convert respone to json
    const content = await response.json();

    // Process your content (if needed)
    ...

    // Call setState() here
    this.setState({someContent: content});

  } catch(e) {
    console.error(e);
  }
}

componentDidMount() {
  this.getModules(`${URL}`);
}

您實際上無法從async函數返回獲取/解析的數據。 根據此MDN鏈接 ， async函數將返回promise ，而不是解析后希望獲得的實際數據。

在您的情況下發生的事情是，您實際上正在嘗試從常規（sync）函數（componentDidMount）內部的async函數接收返回值。 您可以執行我建議的操作，也可以在實際的componentDidMount函數中使用.then()在解析並解析了承諾后使用setState 。

我建議在繼續之前閱讀有關async功能和Promise 。

祝你好運！

Answer 2

沒有測試代碼，一個問題是您直接錯誤地修改了state 。 這不會觸發render ，因此您的視圖不會更新。 嘗試使用setState() ，如下所示：

<li>{this.setState({modulesList[i]})}<li/>