Ajax 调用 React Starter Kit

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

如果不测试您的代码，一个问题是您的做法不正确 modifying state directly。这不会触发 render，因此您的视图不会更新。试试 setState()，像这样：

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

Answer 2

我的建议是：

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

您实际上无法 return 来自 async 函数的 fetched/parsed 数据。根据 this MDN link、async 函数 returns a promise，而不是您在解析后期望得到的实际数据。

在您的案例中发生的事情是，您实际上是在常规（同步）函数 (componentDidMount) 中尝试从 async 函数接收 returned 值。您可以按照我的建议进行操作，或者在实际的 componentDidMount 函数中解析和解析承诺后使用 .then() 来使用 setState。

我建议在继续之前阅读 async 函数和 Promise。

祝你好运！

Ajax 调用 React Starter Kit

Ajax call in React Starter Kit

javascript

ajax

reactjs

react-starter-kit